表格边框问题 - 想要一些填充或边距（左侧和右侧）

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'，但确实支持'柴尔德'）

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>

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