HTML嵌套表结构

Question

我希望创建一个如下所示的表结构；

注意，我刚刚在这里显示了BodyRow1，但是正文行中的所有列都有内容（主要是文本框）

我已经使用创建它们

<thead>, <tbody> and <tfoot>

我在<tfoot>下添加了最后3行

但是，对于是否要在表脚下创建一个单独的表并添加这3行或为此使用相同的父表结构，我有2种想法。

现在这使事情变得有点困难了，

1. FooterTxtBox1和FooterTxtBox2与上面的正文行完全无关。因此FooterTxtBox1可以更长，而不必受BodyRow1约束
2. 但是ColSubTotal1和ColSubTotal2实际上是该列的总计，因此必须与这些列对齐。

遵循的推荐方法是什么？我不是在看代码，而是想使用您认为更合适的方法？

Answer 1

当然，较小的弊端是将它们放在同一张桌子中。您希望有远见的用户能够导航到与其标头单元格相同的上下文中的所有单元格。您可以根据需要将页脚放置在标题元素中，并使用负边距将其与总计并排放置，尽管您必须注意不要让页脚与总计重叠。像这样：

table {
  border:1px solid;
  caption-side: bottom;
}
caption {
  text-align:left;
  margin-top:-23px;
  margin-left:3px;
}
caption span {
  display:inline-block;
  margin:0 10px;
  border:1px solid red;
  width:150px;
}
td, th {
  border:1px solid blue;
}      

  <table>
    <caption><span>FooterTxtBox1</span><span>FooterTxtBox2</span>
    <thead>
      <tr><th>Col Head 1<th>Col Head 2<th>Col Head 3
        <th>Col Head 4<th>Col Head 5
    <tbody>
      <tr><td>BodyRow 1<td><td><td><td>
      <tr><td>BodyRow 2<td><td><td><td>
    <tfoot>
      <tr><td>FooterBtn1<td>FooterBtn1<td><td><td>
      <tr><td colspan=3><td>ColSubTotal1<td>ColSubTotal2
      <tr><td colspan=4><td>Total
  </table>

Answer 2

HTML嵌套表结构-毕竟您可以嵌套表，尤其是在不需要边框的情况下。尽管在那里启用了它们，以显示发生了什么：

<table border=1>
  <thead>
    <tr><th>Col Head 1<th>Col Head 2<th>Col Head 3<th>Col Head 4<th>Col Head 5<th>Col Head 6
  <tbody>
    <tr><td>BodyRow1
    <tr><td>BodyRow2
  <tfoot>
    <tr><td>FooterBtn1<td>FooterBtn1
    <tr><td colspan=4><td>ColSubTotal1<td>ColSubTotal2
    <tr><td colspan=5>
      <table width=100%><tr><td>FooterTxtBox1<td>FooterTxtBox2</table>
    <td>Total
</table>