TD寬度不工作 - NO CLUE爲什麼

我不知道爲什麼這給我這樣一個問題;我已經制作了功能表100萬次。試圖製作一個全角桌子。TD寬度不工作 - NO CLUE爲什麼

第一個單元格應該佔用其他兩個空間不能佔用的空間。第二個和第三個單元應該都是200px。

目標是沒有寬度歸因於第一個單元格，以便它會改變大小，因爲窗口更改大小 - 但即使我將寬度屬性添加到所有三個（因爲它是在下面的CSS），它不能正確隔開。儘管我已經用100％的寬度標記了桌子，但它仍然在桌子的最右角。

請幫助！

table.topper-table { 
 
\t width: 100%; 
 
} 
 

 
td.topper-table-nav { 
 
\t width: 65%; 
 
\t text-align: left; 
 
} 
 

 
td.topper-table-search { 
 
\t width: 10%; 
 
\t text-align: right; 
 
    \t padding-right: 25px; 
 
} 
 

 
td.topper-table-social { 
 
\t width: 25%; 
 
\t text-align: right; 
 
\t border-left: 1px solid #9db3c4; 
 
\t padding-left: 25px; 
 
}

<table class="topper-table"> 
 
<tr> 
 
<td class="topper-table-nav"> 
 
TEST 
 
</td> 
 
<td class="topper-table-search"> 
 
TEST 2 
 
</td> 
 
<td class="topper-table-social"> 
 
TEST 3 
 
</td> 
 
</tr> 
 
</table>

來源

2016-10-04 Samantha

它的顯示按在這個片段中的百分比當我運行它.. –

見我的回答如下沒有百分比。 – Bouke

我認爲這是你在，這不正是你試圖達到什麼樣的目標代碼，無論是在Chrome和Firefox瀏覽器。我想你已經嘗試過這樣的事情（而不是像上面顯示的百分比）。你可以測試我的代碼並運行它來查看它在計算機上的呈現方式嗎？

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    table.topper-table { 
 
     width: 100%; 
 
    } 
 
    td.topper-table-nav { 
 
     text-align: left; 
 
     background-color: orange; 
 
    } 
 
    td.topper-table-search { 
 
     width: 200px; 
 
     text-align: right; 
 
     padding-right: 25px; 
 
     background-color: red; 
 
    } 
 
    td.topper-table-social { 
 
     width: 200px; 
 
     text-align: right; 
 
     border-left: 1px solid #9db3c4; 
 
     padding-left: 25px; 
 
     background-color: lime; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <table class="topper-table"> 
 
    <tr> 
 
     <td class="topper-table-nav">TEST 1</td> 
 
     <td class="topper-table-search">TEST 2</td> 
 
     <td class="topper-table-social">TEST 3</td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

來源

2016-10-04 18:13:54 Bouke

@Samantha，你已經解決了嗎？ – Bouke

TD寬度不工作 - NO CLUE爲什麼

回答

相關問題