Question

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

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

Answer 2

HTML5不支持 td 和元素的

width 属性，您仍然可以通过将其显示设置为内联来获得解决方法 - 阻止并通过CSS设置其宽度。

Answer 3

您必须将表格布局算法更改为fixed，而不是默认值auto

jsFiddle

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

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

Answer 4

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

标记忽略CSS中的宽度

4 个答案: