当我在反应中使用“colSpan”时，为什么它不改变 dom 上的内容？答案

【问题标题】：When I used "colSpan" in react, why doesn't it change what's on the dom?当我在反应中使用“colSpan”时，为什么它不改变 dom 上的内容？
【发布时间】：2020-12-15 21:04:14
【问题描述】：

我正在尝试在反应中使用 colSpan

<th  colSpan="2" className="CustomerTableHead">
 Description
  </th>

我已经按照其他线程的建议尝试了 colSpan={6} 和 colSpan='6'，但它不起作用。我对此很陌生，任何建议都将不胜感激

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
可以创建一个代码沙箱并在这里分享。

标签： css reactjs

【解决方案1】：

这更像是一个 HTML 问题。您的代码没有显示表格中的其他行和列，但至少您需要在后续行中使用两列才能使 colspan 正确显示。

这是一个 colSpan 为 2 的 Table 组件的基本示例：

const Table = () => {
  return (
    <table border="1">
      <thead>
        <th colSpan="2" className="CustomerTableHead">
          Description
        </th>
      </thead>
      <tbody>
        <td>col 1</td>
        <td>col 2</td>
      </tbody>
    </table>
  );
}

这显示为：

【讨论】：