2

如何在 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>

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

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

4

4 回答 4

2

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

<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

于 2013-10-16T18:27:43.623 回答
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/

于 2013-10-16T18:58:26.757 回答
1

通过您的贡献和在 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 元素可以解决它。

于 2013-10-17T11:10:53.383 回答
0 
<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 将解决您的问题。试试上面的那个，让我知道你得到了什么。

于 2013-10-16T11:37:39.677 回答