html - テーブル行の境界線の問題 - パディングまたはマージンが必要です (左側と右側)

Question

リンクhttp://jsfiddle.net/anglimass/njAFp/ をクリックします。

境界線の左右にスペースが必要です:

今：

したい:

「欲しい画像」の左右を見てください。「テーブル行」パディング（左右）を打ちました。誰でもこれを行う方法を知っていますか?

Answer 1

TRレベルでは無理だと思います。TD レベルはどうですか:

table tbody tr td {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

table tr td:first-child {
    padding-left: 20px;
    border-left: 10px solid red;
}

table tr td:last-child,
td.last-td {
    padding-left: 20px;
    border-right: 10px solid red;
}

これは、x-browser 互換性の点でも重要です。

編集: 上記をフィドルにドロップして ie7 で確認し、最後の TD に「ハッキー」「last-td」セレクターを追加します (ie7 は「last-child」をサポートしていませんが、「first-child」はサポートしています) )

Answer 2

それは一種のハッキーですが、それはあなたが探している効果を生み出します：

http://jsfiddle.net/njAFp/3/

<table cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th></th>
            <th>lai</th>
            <th>pola</th>
            <th>vaala</th>
            <th>elah</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="blank"></td>
            <td>ennala</td>
            <td>yamla</td>
            <td>varamattala</td>
            <td>vettiruven</td>
            <td class="blank"></td>
        </tr>
    </tbody>
</table>

</ p>

    table{width:400px; height:auto; background:silver;border-collapse:collapse;}
    table thead{}
    table tbody{}
    table tr{ background:silver;}
    table tr th{ padding:5px; background:silver;}
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;}


td.blank { width:20px; border:0; }