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

单击链接

我想要左边框和右边框留出一些空间：

现在：

想要：

---

请观看左右两侧的“想要的图像”。我敲打了“桌子行”的填充物（左和右）。有人知道怎么做吗？

我认为你在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中查看，在你的最后一个td中添加“hacky”“last td”选择器（ie7不支持“last child”，但支持“first child”）

这有点像hacky，但它会产生你想要的效果：

---

矢量-tnx，但我必须要更低的版本，哪一个版本？根据我的经验，在TD级别处理表元素（如您的示例中）更为重要reliable@vector-IE7和IE8，这是CMS PRJ。为什么你要添加额外的TH和TD？空白T/TD产生你所寻找的左、右缓冲器。这有点老套，但这是解决你问题的一种方法。

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