时间戳

首页 > 解决方案 > 如何使用材料 ui 创建一个表格，该表格具有一个由 reactjs / css 中的许多部分组成的 tableHead 单元格

html - 如何使用材料 ui 创建一个表格，该表格具有一个由 reactjs / css 中的许多部分组成的 tableHead 单元格

问题描述

也许标题描述性不够。我需要做的是创建看起来像这样的表 在此处输入图像描述

基本上，“平均”是一个合并的单元格，有两个“子单元格”，“高度和宽度”可以进一步分解。但是在材质 ui 中使用跨度并不能达到预期的效果。

标签： htmlcssreactjsmaterial-ui

解决方案

我为你创建了一个 CodeSandBox。要查看代码及其工作原理，请在此处访问 CodeSandBox。

图像中表头的代码

  <thead>
      <tr>
        <th rowSpan="2" />
        <th colSpan="2"> Average </th>
        <th rowSpan="2"> Red Eye </th>
      </tr>
      <tr>
        <th> Height </th>
        <th> Weight </th>
      </tr>
  </thead>

推荐阅读