html - cssで隣接する2つのセルに単一の境界線を境界線に与える方法

Question

HTML でフォームを作成しており、入力コントロールとラベルのレイアウトにテーブルを使用しています。

フォームの入力ごとに、1 つのラベルが関連付けられています。

ラベルとそれに関連付けられた入力タグである隣接セルの各ペアの周りに境界線を表示したい。

隣接する 2 つのタグの周りに div を作成しようとしましたが、タグ内でのみ許可されているため、<td>「無効なタグ」と表示されます。<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

デモ

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;ルールを適用してみてください。