html - 如何在表中包含虚拟 tr 以设置列宽， "table-layout"设置为 "fixed"但高度为零

Question

我想以编程方式注入(inject)列宽以设置列宽。为此，必须将表格的表格布局 CSS 设置为“固定”，并且在整个表格中使用第一行的列宽。

所以我尝试了以下操作:

        <style>
          td { 
            border: 1px solid gray; 
          }
        </style>

        <table style="table-layout:fixed;border:1px solid black;" >
            <tbody>
              <tr>
                <td style="border:none;width:200px;"></td>
                <td style="border:none;width:300px;"></td>
                <td style="border:none;width:150px;"></td>
              </tr>
              <tr>
                <td>Data Row 1, cell 1</td>
                <td>Data Row 1, cell 2</td>
                <td>Data Row 1, cell 3</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td>Footer Row 1, cell 1</td>
                <td>Footer Row 1, cell 2</td>
                <td>Footer Row 1, cell 3</td>
              </tr>
           </tfoot>
        </table>

我包含 tfoot 只是为了确保它可以与页脚一起使用(后来也可以与 thead 一起使用!)。

问题是它为虚拟“tr”插入了一个小空间。我尝试将 display 设置为“none”，这会同时发挥虚拟 div 的作用。我尝试将高度设置为 0； line-height 为 0。虚拟 tr 坚持以较小的(1px？)高度坐在那里。如何将其高度设置为零但使用 td 宽度？

Answer 1

你可以考虑colgroup或 css 选择器 nth-child(n)

The HTML <colgroup> element defines a group of columns within a table.

或

The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.

下面的示例首先包括您自己的代码，让您看到 2 个选项的区别(colgroup 或 css)

tr {
  background: gray/* see us */
}

[class] td {
  width: 150px;
}

[class] td:first-child {/*selector similar to [class] td:nth-child(1){} */
  width: 200px;
}


[class] td:nth-child(2) {
  width: 300px;
}

<h1>Your empty row</h1>
<table style="table-layout:fixed;border:1px solid black;">
  <tbody>
    <tr>
      <td style="border:none;width:200px;"></td>
      <td style="border:none;width:300px;"></td>
      <td style="border:none;width:150px;"></td>
    </tr>
    <tr>
      <td>Data Row 1, cell 1</td>
      <td>Data Row 1, cell 2</td>
      <td>Data Row 1, cell 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer Row 1, cell 1</td>
      <td>Footer Row 1, cell 2</td>
      <td>Footer Row 1, cell 3</td>
    </tr>
  </tfoot>
</table>
<hr>
<h1><code>colgroup</code> tag</h1>
<table style="table-layout:fixed;border:1px solid black;">
  <colgroup>
    <col style="width:200px;" /><!-- col  can be style from nth-child() selector too to keep html clean of inline style -->
    <col style="width:300px;" />
    <col style="width:150px;" />
  </colgroup>
  <tbody>
    <tr>
      <td>Data Row 1, cell 1</td>
      <td>Data Row 1, cell 2</td>
      <td>Data Row 1, cell 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer Row 1, cell 1</td>
      <td>Footer Row 1, cell 2</td>
      <td>Footer Row 1, cell 3</td>
    </tr>
  </tfoot>
</table>
<hr>
<h1>nth-child() approach</h1>
<table class style="table-layout:fixed;border:1px solid black;">
  <tbody>

    <tr>
      <td>Data Row 1, cell 1</td>
      <td>Data Row 1, cell 2</td>
      <td>Data Row 1, cell 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer Row 1, cell 1</td>
      <td>Footer Row 1, cell 2</td>
      <td>Footer Row 1, cell 3</td>
    </tr>
  </tfoot>
</table>