合并两个单元格 HTML 表格

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

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

然后，也许你可以使用一些像这样的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>