Question

如何在html中设置表格的样式，以便它像这样布局：

<-       full page width             ->
<-20px->< dynamic ><-20px->< dynamic  >
+------------------+-------------------+
¦ A                ¦ B                 ¦ header row 1
+-------+----------+-------+-----------+
+ A1    ¦ A2       ¦ B1    ¦ B2        ¦ header row 2
+-------+----------+-------+-----------+
¦ a1      a2         b1      b2        ¦ data rows

如果没有分组标题行，我会这样做：

<table style="width:100%; table-layout:fixed;">
  <tr>
    <th style="width:20px;">A1</th>
    <th style="           ">A2</th>
    <th style="width:20px;">B1</th>
    <th style="           ">B2</th>
  </tr>
  <tr>
    <td>a1</td>
    <td>a2</td>
    <td>b1</td>
    <td>b2</td>
  </tr>
</table>

这很好用，当我调整浏览器窗口的大小时，没有明确宽度的两个cols占用可用空间，而两个固定cols保持给定的宽度。

但是当我添加分组标题行时，我还没有找到任何方法来分配宽度，以便表格有两个固定的和两个可适应的列。

Answer 1

我只能在这里的一个浏览器上测试它，但删除表格布局会在此处修复它。

<table style="width:100%;">
  <tr>
    <th colspan="2">A</th>
    <th colspan="2">B</th>
  </tr>
  <tr>
    <th style="width: 20px;">A1</th>
    <th>A2</th>
    <th style="width: 20px;">B1</th>
    <th>B2</th>
  </tr>
  <tr>
    <td style="width: 20px;">a1</td>
    <td>a2</td>
    <td style="width: 20px;">b1</td>
    <td >b2</td>
  </tr>
</table>

某些浏览器确实存在问题：Internet Explorer 8 table cell width bug with colspan set

Answer 2

我建议使用<colgroup />并通过CSS设置宽度（如果可能的话，不要使用内联样式）。如您所见，当涉及colspan时，您需要为每列设置宽度，但这确实不是HTML / CSS的问题。

<强> CSS

table{
    width:100%;

.narrow{
    width:40px;
}
.dynamic{
    width:auto;
}

<强> HTML

<table>

<colgroup class="narrow"/>
<colgroup class="dynamic"/>
<colgroup class="narrow"/>
<colgroup class="dynamic"/>

<tr>
    <th colspan="2">A</th>
    <th colspan="2">B</th>
</tr>
<tr>
    <th>A1</th>
    <th>A2</th>
    <th>B1</th>
    <th>B2</th>
</tr>

<tr>
    <td>a1</td>
    <td>a2</td>
    <td>b1</td>
    <td>b2</td>
</tr>
[ ... ]

</table>

http://jsfiddle.net/daCrosby/X7TgN/1/

Answer 3

通过您的贡献和W3C文档中的一些搜索，我找到了这个解决方案：

<table border="1" style="table-layout:fixed; width:100%;">
  <col style="width:20px;">
  <col style="width:50%;">
  <col style="width:20px;>
  <col style="width:50%;>
  <tr>
    <th colspan="2">A</th>
    <th colspan="2">B</th>
  </tr>
  <tr>
    <th>A1</th>
    <th>A2</th>
    <th>B1</th>
    <th>B2</th>
  </tr>
  <tr>
    <td>a1</td>
    <td>a2</td>
    <td>b1</td>
    <td>b2 very long text</td>
  </tr>
</table>

table-layout：fixed需要具有指定的列宽。否则，宽度是根据单元格内容计算出来的，这在示例中是正常的，但实际上是一个麻烦。

在固定布局中，如果没有col元素，则第一行用于定义列宽。这就是为什么单元格宽度适用于单个标题行，但不适用于分组标题。提供col元素解决了它。

Answer 4

<table style="width:100%; table-layout:fixed;">
  <tr>
   <th colspan="2">A1</th>
   <th colspan="2">A2</th>
  </tr>
   <tr>
   <th colspan="1">A1</th>
   <th colspan="1">A2</th>
   <th colspan="1">B1</th>
   <th colspan="1">B2</th>
  </tr>
   <tr>
   <td colspan="1">a1</td>
   <td colspan="1">a2</td>
   <td colspan="1">b1</td>
   <td colspan="1">b2</td>
  </tr>
  </table>

使用colspan将解决您的问题。尝试上面的一个，让我知道你得到了什么。

如何使用可变和固定列宽以及分组标题在HTML中创建表格？

4 个答案: