如何将数据放在单行中以获取 2 个标题标签 html答案

【问题标题】：how to put data in single line for 2 header tags html如何将数据放在单行中以获取 2 个标题标签 html
【发布时间】：2021-02-14 01:01:40
【问题描述】：

我有下面的html代码

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

以上数据在页面上加载良好。 2 个包含月份和储蓄的标题以及我从后端收到的两行数据。

当我没有从后端获取任何数据并且我想在第一行显示错误消息时，就会出现问题。我这样做如下

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
      <td> No data to show because the request to load user info failed</td>
</table>

如您所见，我想在第一行显示错误消息<td> No data to show because the request to load user info failed。问题是这些数据被包含在第一列本身中，而我希望此错误消息传播到 Month 和 Savings 列。

谁能帮我实现这个目标？

【问题讨论】：

标签： javascript html reactjs dom html-table

【解决方案1】：

您仍然需要添加tbody 和tr，并且可以使用td 元素上的colspan 属性来“合并”列。例如，colspan="2" 使一个单元格跨越两列。

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">No data to show because the request to load user info failed</td>
    </tr>
  </tbody>
</table>

【讨论】：