html - 标签忽略CSS中的宽度

Question

我有一个表格，我已经成功地使用选择器突出显示了正确的单元格。但是width标签被忽略了。有人可以解释为什么单元格的宽度不受影响吗？

这是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; }

Answer 1

您需要在table-layout:fixed表格中添加 CSS：

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

jsFiddle 示例

Answer 2

HTML5 不支持td和th元素的width属性，您仍然可以通过将它们的显示设置为 inline-block 并通过 CSS 设置它们的宽度来获得解决方法。

Answer 3

您必须将表格布局算法更改fixed为代替默认值，auto

jsFiddle

W3C提供的有关fixed表格布局值的更多信息：

http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

Answer 4

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