如何将 HTML 表格列宽设置为百分比（表格页脚不影响表格正文）？

Question

我真的很难理解如何在 HTML 表格中设置列宽的样式。 我无法tfoot为什么不应用百分比宽度以及为什么tfoot内的列会影响 tbody 中的列宽。

任何人都可以对此有所了解，也许可以解释我如何将tbody的列设置为三分之一 (33.333%) 并将tfoot列设置为二分之一 (50%) 并实际跨越整个宽度表（现在它们只跨越上面的 2 列，而不是 3 列）？

任何帮助/指导将不胜感激。

 tbody, tfoot { width: 100%; } tbody tr td { width: 33.333%; } tfoot tr th, tfoot tr td { width: 50%; }

 <table border="1"> <tbody> <tr> <td>Body Row 1 Column 1</td> <td>Body Row 1 Column 2</td> <td>Body Row 1 Column 3</td> </tr> </tbody> <tfoot> <tr> <th>Footer Row 1 Column 1</th> <td>Footer Row 1 Column 2</td> </tr> <tr> <th>Footer Row 2 Column 1</th> <td>Footer Row 2 Column 2</td> </tr> <tr> <th>Footer Row 3 Column 1</th> <td>Footer Row 3 Column 2</td> </tr> </tfoot> </table>

Answer 1

如果您不受限制以至于必须使用一张桌子，为什么不只使用一张桌子呢？

<tfoot>
  <tr>
    <td colspan="3">
      <table>
        <tbody>
          <tr>
            <td>First half</td>
            <td>Second half</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</tfoot>

只需确保样式也适用，并为您的table table { width: 100%; } table table { width: 100%; } ，无边框、边距、填充等。
我发现最好的解决方案是那些你忽略问题的解决方案。