0

我正在用 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>

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

在此处输入图像描述

4

3 回答 3

4

你不是collapsed你的table border，试试这个

演示

table {
   border-collapse: collapse;
}

table, td {
   border: 1px solid #c00000;
}
于 2012-12-19T09:41:41.950 回答
3

如果您可以将课程应用于您的 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/

于 2012-12-19T09:50:55.013 回答
1

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

于 2012-12-19T09:41:09.890 回答