logo标签列表

CSS中表格单元格元素忽略宽度

htmlcss
11

我有一个表格，我已经成功地使用选择器突出显示了正确的单元格。然而，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; }
4个回答
21

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

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

jsFiddle示例

6

td和th元素的width属性在HTML5中不被支持，但您仍然可以通过将它们的显示设置为inline-block并通过CSS设置宽度来解决此问题。

1
你能为那个说法提供一个来源吗？ - Lajos Mészáros
你是不是把它和width属性混淆了？ - Highly Irregular
3
<table style="table-layout:fixed;width:600px"> 然而我的表格被绘制为605像素。 我来自Windows编程背景，在那里你指定想要的宽度，就会得到想要的宽度。 但是使用CSS时，你指定想要的宽度，却得到其他结果。 如果微软制作了CSS，每个人都会因其糟糕而贬低他们，但WWW联盟却幸免于难。 - Paul McCarthy
@Paul：实际上，微软在1999年或2000年尝试过做到这一点，当时他们发布了IE 5或IE 5.5，因为你所描述的正是他们使用的确切盒模型。他们认为自己的模型比W3C标准模型更好，并试图通过仅发布带有其盒模型的浏览器来强制所有人使用它。由于当时每个人都厌倦了他们这种行为，所以他们没有成功，被迫发明了文档类型标签，以允许用户指定要使用哪个盒模型。这种支持两种不同盒模型的方式使得IE6成为历史上最容易出现错误的浏览器之一。 - RedScourge
然后，他们为网页设计师做出了两个非常痛苦的决定。一个是以一种严厉的方式打击盗版，导致数亿个盗版的Windows XP无法升级到修复了大部分漏洞的IE7；另一个是发布了Windows Vista，在接下来的5年里备受诟病。在这两个决定之间，以及这个看似无害的试图作为仁慈的独裁者使用更直观的专有浏览器框模型时，IE6的市场份额比它应该有的多了10多年，使得网页设计倒退了15年。 - RedScourge
他们为什么无法说服W3C，让设计师获得他们指定的宽度更好呢？也许那个撞向月球的火箭正在使用CSS来计算距离 :-) - Paul McCarthy
0
从`.middle`中删除`width:350px;`。您正在设置表的宽度，然后期望单元格能够填充更多的空间。
3
那就是我想做的。我希望中间的表格可以滚动。 - Jon Harding
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接