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 example