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

Posted 2023-03-05

【中文标题】如何将数据放在单行中以获取 2 个标题标签 html

【英文标题】：how to put data in single line for 2 header tags 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 列。

谁能帮我实现这个目标？

【参考方案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>