html - 如何在 HTML 中制作具有可变和固定列宽以及分组标题的表格？

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>

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

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

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