第二个 thead 行可以在固定 table 中定义布局吗？

Question

我正在使用具有 table-layout: fixed 属性的 table，如下例所示：

<table border="1" style="table-layout: fixed; width: 100%">
    <thead>
        <tr>
            <td colspan="4" style="width:100%"> Hello there !</td>
        </tr>
        <tr>
            <td style="width:20%">I</td>
            <td style="width:30%">AM</td>
            <td style="width:15%">STUCK</td>
            <td style="width:35%">!!!</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td colspan="2">E</td>
            <td></td>
        </tr>
    </tfoot>
</table>

如您所见，如果您运行代码段，宽度属性将被忽略，因为布局由 thead 中的第一行定义。

如果删除它，问题将得到解决，如下所示：

<table border="1" style="table-layout: fixed; width: 100%">
    <thead>
        <tr>
            <td style="width:20%">I</td>
            <td style="width:30%">AM</td>
            <td style="width:15%">STUCK</td>
            <td style="width:35%">!!!</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td colspan="2">E</td>
            <td></td>
        </tr>
    </tfoot>
</table>

有没有办法让 table 头第一行不定义布局？

Answer 1

在 table 标签后添加 colgroup。在此处定义 width 和列数

<table border="1" style="table-layout: fixed; width: 100%">
  <colgroup>
    <col span="1" style="width: 20%;">
    <col span="1" style="width: 30%;">
    <col span="1" style="width: 15%;">
    <col span="1" style="width: 35%;">
  </colgroup>
  <thead>
    <tr>
      <td colspan="4"> Hello there !</td>
    </tr>
    <tr>
      <th>I</th>
      <th>AM</th>
      <th>STUCK</th>
      <th>!!!</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td colspan="2">E</td>
      <td></td>
    </tr>
  </tfoot>
</table>

Answer 2

<table border="1" style="table-layout: fixed; width: 100%">
    <col width="20%" />
    <col width="30%" />
    <col width="15%" />
    <col width="35%" />
    <thead>
        <tr>
            <th colspan="4"> Hello there !</th>
        </tr>
        <tr>
            <th>I</th>
            <th>AM</th>
            <th>STUCK</th>
            <th>!!!</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td colspan="2">E</td>
            <td></td>
        </tr>
    </tfoot>
</table>

Answer 3

只需从您的 table 样式中删除“table-layout: fixed”。注意：您还应该在 <thead>

中使用 <th> 而不是 <td>

<table border="1" style="width: 100%">
    <thead>
        <tr>
            <td colspan="4" style="width:100%"> Hello there !</td>
        </tr>
        <tr>
            <td style="width:20%">I</td>
            <td style="width:30%">AM</td>
            <td style="width:15%">STUCK</td>
            <td style="width:35%">!!!</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td colspan="2">E</td>
            <td></td>
        </tr>
    </tfoot>
</table>

第二个 thead 行可以在固定 table 中定义布局吗？

can the second thead row define the layout in a fixed table?

html

html-table