Question

我有一个包含3列的表，其中第三列比其他列大6 Here is my example.
为什么第三列的大小与另一列相同？

更新
我添加了另一个示例，其中表格布局是固定的，宽度是正确的 Here is it.
知道为什么吗？

我需要带有colspan的标题，但它会产生问题。我还需要将表格布局固定。知道如何解决它吗？

IE8和Firefox都会出现问题。

更新
我遵循了@Alex Hadley的建议，但这引起了其他问题我不知道为什么没有隐藏长单元格：http://jsfiddle.net/9vcC2/32/

Answer 1

由于table-layout: fixed;。从css中删除后检查它。

正如穆尔塔扎所说：这是固定的。你的表忽略了给予单个td的宽度，并根据固定样式采用自己计算的宽度

Answer 2

Teez绝对正确，问题出在table-layout:fixed上。

这个样式的作用是使表格从遇到的第一个行中获取列宽，然后开始纯粹基于此开始生成内容。因此，在您的示例中，第一行是colspan=3，因此它只是为所有列提供了相等的宽度。尝试在第一个示例中交换行以查看效果。这也解释了为什么你的第二个例子确实有效。

可在此处查看更多信息：http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout

在固定表格布局算法中，每列的宽度确定如下：


“width”属性的值为“auto”的列元素设置该列的宽度。

否则，第一行中“width”属性的值不是“auto”的单元格将确定该列的宽度。 如果单元格跨越多个列，则宽度将分为列。

任何剩余的列均等地划分剩余的水平表空间（减去边框或单元格间距）。

[我的大胆]

作为解决方案，您可以在<colgroup>代码中添加<table>作为第一个条目：

<colgroup> 
    <col style="width:50px;" /> 
    <col style="width:50px;" /> 
    <col style="width:300px;" /> 
</colgroup>

例如，

。见here。

Answer 3

这是因为colspan td首先设置宽度。如果在colspan之前声明宽度，它可以工作：

<thead>
  <tr>
     <td style="width:50px;">FirstName</td>
     <td style="width:50px;">LastName</td>
     <td style="width:300px;">Address</td>
  </tr>
  <tr>
     <td colspan="3">text</td>
  </tr>
</thead>

您可以为宽度使用不可见的行：

<thead>
  <tr style="height:0px;">
     <td style="width:50px;"></td>
     <td style="width:50px;"></td>
     <td style="width:300px;"></td>
  </tr>
  <tr>
     <td colspan="3">text</td>
  </tr>
  <tr>
     <td>FirstName</td>
     <td>LastName</td>
     <td>Address</td>
  </tr>
</thead>

Answer 4

如@AlexHadley所述，问题是由td中的多个thead行引起的，这需要使用colgroups来支持布局。

但是，由于tr中的初始thead实际上用于提供表的描述，因此使用caption标记可能更具语义性为表分配定义。

在标记注释中，您还应该使用th而不是td作为表格标题中的行。

有关table标记中可用内容的详细信息，请查看此this WDG reference。

列宽无效

4 个答案: