相关疑难解决方法(0)

如何对与其父表头部对齐(和关联)的HTML嵌套表进行语义编码

编辑:所选答案包含一个指向工作小提琴的链接,我可以在不使用嵌套表的情况下编写.

我想用HTML语义编写一个表格,其布局如下图所示.不幸的是,我无法在网络上找到任何类似的东西.

在此输入图像描述

我已经能够通过手动设置单元格宽度强制外观,但我想确保我生成的代码有意义,我不认为是这种情况,因为没有手动设置宽度,标准渲染看起来更多如下图.

在此输入图像描述

到目前为止,我提出的有问题的代码看起来像这样:

<table>
  <thead>
    <tr>
      <th scope="col">Type of Loss Dollar</th>
      <th scope="col">Reserve Amount</th>
      <th scope="col">Paid Amount</th>
      <th scope="col">Total This Loss</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td colspan="3">
        <table>
          <tbody>
            <tr>
              <th scope="row">Medical</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Indemnity</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr><tr>
              <th scope="row">Expense</th>
              <td><input type="text" /></td>
              <td><input type="text" /></td>
            </tr>
          </tbody>
        </table>
      </td><td>
        TOTAL
      </td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

html html-table semantic-markup

22
推荐指数
1
解决办法
3万
查看次数

标签 统计

html ×1

html-table ×1

semantic-markup ×1