<TD>标签忽略CSS中的宽度

我有一张表，我已经成功地使用选择器突出显示正确的单元格。但width标记被忽略。有人可以解释为什么细胞的宽度不受影响？<TD>标签忽略CSS中的宽度

这里是jsfiddle。

HTML：

<table border="1"> 
    <tr> 
     <th>ID</th> 
     <th>Title</th> 
    </tr> 
    <tr> 
     <td>Test Title</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <td>Test Title</td> 
     <td>1</td> 
    </tr> 
</table> 
<div class="middle"> 
<table border="1" width="100%">  
    <tr> 
     <th>Test Col 1</th> 
     <th>Test Col 2</th> 
     <th>Test Col 3</th> 
     <th>Test Col 4</th> 
     <th>Test Col 5</th> 
     <th>Test Col 6</th> 
    </tr> 
    <tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     <td>Col 4</td> 
     <td>Col 5</td> 
     <td>Col 6</td> 
    </tr> 
    <tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     <td>Col 4</td> 
     <td>Col 5</td> 
     <td>Col 6</td> 
    </tr> 
    </table> 
</div> 
<table border="1"> 
    <tr> 
     <th>LINKS</th> 
    </tr> 
    <tr> 
     <td>LINK 1 | LINK 2</td> 
    </tr> 
    <tr> 
     <td>LINK 1 | LINK 2</td> 
    </tr> 
</table>

CSS：

table { float:left; } 
.middle { float:left; width:350px; overflow:auto;} 
.middle table td, .middle table th { width:300px; background:red; }

来源

2013-05-07 Jon Harding

您需要添加table-layout:fixed到表CSS：

table { float:left;table-layout:fixed; }

jsFiddle example

来源

2013-05-07 15:10:50 j08691

你有你的表格的布局算法改为fixed到位的默认值，auto

jsFiddle

从 W3C关于 fixed表格的布局值

来源

2013-05-07 15:11:01 Adrift

table style =“table-layout：fixed; width：600px” 然而，我的表格绘制为605px。我来自Windows编程背景，您可以指定所需的宽度并获得所需的宽度。用CSS指定你想要的宽度，并得到别的东西。如果微软提出CSS，每个人都会因为它有多坏而贬低他们，但是www财团可以放轻松。 – 2017-06-25 09:49:55

从.middle中删除width:350px;您正在设置表格的宽度，然后期望单元格能够填充更多空间t母鸡分配。

来源

2013-05-07 15:14:10

这就是我想要做的。我想要中间的桌子滚动 – 2013-05-07 15:15:07

这没什么错。 – j08691 2013-05-07 15:15:17

width属性的TD和个元素是不支持HTML5，你仍然可以通过设置它们的显示内联块，并通过CSS设置它们的宽度得到了解决方法。

来源

2013-05-07 15:16:18 Pavel

<TD>标签忽略CSS中的宽度

回答

相关问题