如何在HTML表格单个单元格内实现三列布局（React+Material UI）

问题描述 #

需要复刻如下Excel制作的实习项目表格效果：

此前尝试用无序列表ul实现多行列内容，但最终显示效果粗糙、行对齐错乱，实际效果如下：

当前使用React JS + Material UI技术栈开发，现有实现代码如下：

<TableContainer component={Paper}>
    <Table sx={{ width: "100%" }} aria-label="customized table">
      <TableHead>
        <TableRow>
          <StyledTableCell>
            TYPE OF INTERNSHIP PROGRAM ACTIVITY
          </StyledTableCell>
          <StyledTableCell>HTE/ OFFICES</StyledTableCell>
          <StyledTableCell>COORIDNATOR/ OFFICER IN-CHARGE</StyledTableCell>
          <StyledTableCell>
            INTERN'S ROLES, DUTIES/ RESPONSIBILITIES
          </StyledTableCell>
          <StyledTableCell>COORDINATOR'S CONTACT NUMBER</StyledTableCell>
          <StyledTableCell>COORDINATOR'S EMAIL ADDRESS</StyledTableCell>
          <StyledTableCell>NO. OF HOURS</StyledTableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <StyledTableRow>
          <StyledTableCell component="th" scope="row">
            Pre-internship Activity
          </StyledTableCell>
          <StyledTableCell>
            Bulacan State University - Bustos Campus
          </StyledTableCell>
          <StyledTableCell>{"Lyn M. Dalisaymo"}</StyledTableCell>
          <StyledTableCell>
            <ul>
              <li>Compilation of credentials/ requirements</li>
              <li>
                Pre-internship orientation prior to deployment to internship
              </li>
              <li>
                Parents Virtual SIP Orientation Program of the College.
              </li>
            </ul>
          </StyledTableCell>
          <StyledTableCell>{"09451606406"}</StyledTableCell>
          <StyledTableCell>{"lyn.dalisaymo@bulsu.edu.ph"}</StyledTableCell>
          <StyledTableCell>
            <ul>
              <li>4</li>
              <li>8</li>
              <li>4</li>
            </ul>
          </StyledTableCell>
        </StyledTableRow>
      </TableBody>
    </Table>
  </TableContainer>

解决方案 #

现有实现效果差的核心原因是把职责列表和小时数列表拆到了两个独立单元格里分别用ul渲染，两个列表没有绑定行对应关系，自然会出现间距不对、行错位的问题。不需要在单个单元格内强行做三列布局，直接把多行内容按行拆分渲染，保证每一行的职责和对应小时数处在等高的行容器里，就能完美对齐Excel效果。
针对Material UI技术栈，具体改法如下：

• 先把多行的职责、对应小时数整理成结构化数组，避免重复编写冗余JSX
• 移除两个单元格内独立的ul结构，清除默认列表的内外边距、列表标记样式
• 每个条目对应一个flex布局的行容器，两个单元格内的同行容器设置完全一致的内边距、下边框，保证视觉上的行分隔线对齐
• 职责内容占满单元格剩余空间，小时数固定宽度居中对齐即可

修改后的核心实现代码：

// 提前整理多行结构化数据
const preInternshipItems = [
  {
    duty: "Compilation of credentials/ requirements",
    hours: 4
  },
  {
    duty: "Pre-internship orientation prior to deployment to internship",
    hours: 8
  },
  {
    duty: "Parents Virtual SIP Orientation Program of the College.",
    hours: 4
  }
]

// TableBody部分修改
<TableBody>
  <StyledTableRow>
    {/* 固定不换行的内容加rowSpan实现跨多行，语义更规范 */}
    <StyledTableCell component="th" scope="row" rowSpan={3}>
      Pre-internship Activity
    </StyledTableCell>
    <StyledTableCell rowSpan={3}>
      Bulacan State University - Bustos Campus
    </StyledTableCell>
    <StyledTableCell rowSpan={3}>Lyn M. Dalisaymo</StyledTableCell>

    {/* 职责列按行渲染 */}
    <StyledTableCell sx={{ padding: 0 }}>
      {preInternshipItems.map((item, idx) => (
        <div 
          key={idx}
          style={{
            display: "flex",
            alignItems: "center",
            padding: "12px 16px",
            borderBottom: idx !== preInternshipItems.length -1 ? "1px solid rgba(224, 224, 224, 1)" : "none"
          }}
        >
          {item.duty}
        </div>
      ))}
    </StyledTableCell>

    <StyledTableCell rowSpan={3}>09451606406</StyledTableCell>
    <StyledTableCell rowSpan={3}>lyn.dalisaymo@bulsu.edu.ph</StyledTableCell>

    {/* 小时数列按行渲染，和职责列一一对应 */}
    <StyledTableCell sx={{ padding: 0 }}>
      {preInternshipItems.map((item, idx) => (
        <div 
          key={idx}
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            padding: "12px 16px",
            borderBottom: idx !== preInternshipItems.length -1 ? "1px solid rgba(224, 224, 224, 1)" : "none"
          }}
        >
          {item.hours}
        </div>
      ))}
    </StyledTableCell>
  </StyledTableRow>
</TableBody>

给固定内容的单元格添加rowSpan属性是表格实现跨多行内容的标准语义化写法，相比在单个单元格内嵌套多列布局，这种写法兼容性更好，也不会出现单元格内容溢出、行高错乱的问题。如果需要更贴近Excel的紧凑显示效果，直接调整行容器的padding数值即可。

内容的提问来源于stack exchange，提问作者John Michael Vicmudo