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>

它的显示按在这个片段中的百分比当我运行它.. –

见我的回答如下没有百分比。 – 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>

@Samantha，你已经解决了吗？ – Bouke

TD宽度不工作 - NO CLUE为什么

相关推荐