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 浏览器的兼容性也很重要。

编辑：您可以将上述内容放入您的小提琴中并在 ie7 中查看它，将“hacky”“last-td”选择器添加到您的最后一个 TD（ie7 不支持“last-child”，但支持“first-child” )

Answer 2

这有点 hacky，但它会产生您正在寻找的效果：

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; }