html - 如何在 css 中为两个相邻单元格设置单个边框

Question

我正在用 html 制作一个表单，我正在使用一个表格来布局我的输入控件和标签。

对于表单的每个输入，都有一个与之关联的标签。

我希望在作为标签及其关联的输入标签的每对相邻单元格周围出现边框。

我尝试在两个相邻的 <td> 周围制作一个 div标签，但它说“无效标签”只有<td>允许在 <tr> 内标签。

有没有办法用 CSS 或其他任何方式来实现？

我的 HTML 示例代码:

<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>

下面是我想要实现的截图。

Answer 1

你还没有折叠你的表格边框，试试这个

Demo

table {
   border-collapse: collapse;
}

table, td {
   border: 1px solid #c00000;
}