Question

示例表：

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td colspan="2">555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

我想将两个td与电话号码合并，以使它们彼此相邻显示，而没有垂直线分隔两个单元格。但是必须将这些数字保存在单独的td元素中，因此不允许我将两个数字都写在一个td中。这可以实现吗？

它应该看起来像这样：

+------------+-----------------------+
|    Name    |       Telephone       |
+------------+-----------------------+
| Bill Gates | 555 77 854 555 77 855 |
+------------+-----------------------+

编辑

折叠表标题不会折叠我的数据，而这正是我真正需要的。

Answer 1

如果您只希望有两部手机，可以这样完成：

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Answer 2

如果您要为一个colspan="2"表头设置多个td，则您的th放错了位置。

然后，也许您可以使用如下样式的CSS：

新代码段： （缺少CSS代码）

table {
  border-collapse: collapse;
}

th, td {
  padding: 4px 8px;
  border: 1px solid black;
}

td:nth-of-type(3) {
  border-left: 2px solid transparent;
}

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone(s)</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

旧代码段：

table {
  border-collapse: collapse;
}

th, td {
  padding: 4px 8px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
th, td:first-of-type {
  border-left: 1px solid black;
  border-right: 1px solid black;
}
td:last-of-type {
  border-right: 1px solid black;
}

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone(s)</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

合并两个单元格的HTML表

2 个答案: