如何在表中包含一个虚拟 tr 只是为了设置列宽，"table-layout"设置为 "fixed" 但高度为零

Question

我想编程地注入列宽度以设置列的宽度。为此，必须将表的表格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"插入了一个很小的空间。我尝试将显示器设置为"无"，这将使虚拟div的效果全部效果。我尝试将高度设置为0；线高到0。虚拟tr坚持坐在那里的高度(1px？(高度。如何将其高度设置为零但使用TD宽度？

Answer 1

您可以考虑colgroup或CSS选择器nth-child(n(

HTML <colgroup>元素定义了表中的一组列。

或

:nth-child() css伪级匹配元素基于其在一组兄弟姐妹中的位置。

下面的示例首先包括您自己的代码，让您看到差异nd nd the 2 options (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>