如何为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

你没有collapsed table border，试试这个

Demo

table {
   border-collapse: collapse;
}

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

Answer 2

如果你可以在你的td上申请课程，你可以试试这个：

<table cellspacing="0">
    <tr>
        <td class="label">Label1: </td>
        <td>input1</td>
        <td class="label">Label2: </td>
        <td>input2</td>
    </tr>
</table>​

使用以下css：

table {
    background-color: silver;
    border-collapse: collapse;
}
td {
    padding: 5px;
    border: 1px solid red;
    border-width: 1px 1px 1px 0px;
}

td.label {
    border-width: 1px 0px 1px 1px;    
}

http://jsfiddle.net/H3p8e/2/

Answer 3

尝试应用border-collapse:collapse;规则。