css - 从表格单元格中删除边框

Question

我有一个动态生成的表结构。表格有一个棘手的样式。

我已经在直接表格的顶部和右侧添加了边框，我需要的是删除/操作 table 的第一个和最后一个 td 的边框颜色。

如果你能看到我的 fiddle ，我需要用灰色轮廓包裹橙色的 table 。同时到 td 的 1px 边界应该保持不变。

如果我尝试将边框置于单元格顶部，则白色边框会塌陷。

CSS:

.table_main {
    border-top: 3px solid #d6d6d6 !important; 
    border-right: 3px solid #d6d6d6 !important; 
}

.table_main td {
    background: #ff9d26;
    border-right: solid 1px #fff;
    border-bottom: 1px solid #fff;
    padding: 1px;
    text-align: center;
    width: 100px
}

.left {
    background: #fff !important;
    border-right: 3px solid #d6d6d6 !important; 
    border-bottom: 0 !important
}

.noborder {
    background: #fff !important;
}

.bottom{
    background: #fff !important;
    border-top: 3px solid #d6d6d6 !important; 
}

.top{
    border-top: 1px solid #fff  
}

请检查 DEMO here

P.S - 我不想更改 html 的结构，因为它是自动生成的表格代码。并且没有伪类，因为它在 IE8 及以下版本中不受支持。我需要这在 IE7+ 中是正确的

Answer 1

DEMO

像这样更改您的 CSS 类:

<table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr class="top">
        <td class="left">x</td>
        <td>vb</td>
        <td>X</td>
        <td class="right">g</td>
    </tr>
    <tr>
        <td class="left">2</td>
        <td>z</td>
        <td>x</td>
        <td class="right">x</td>
    </tr>
    <tr>
        <td class="left">3</td>
        <td>v</td>
        <td>v</td>
        <td class="right">d</td>
    </tr>
    <tr class="bottom">
        <td class="left">4</td>
        <td>r</td>
        <td>r</td>
        <td class="right">x</td>
    </tr>
</table>

并使用这个 CSS:

.table_main {
}

.table_main td {
    background: #ff9d26;
    border-right: solid 1px #fff;
    border-bottom: 1px solid #fff;
    padding: 1px;
    text-align: center;
    width: 100px
}

.left, .bottom td {
    background: #fff !important;
}

.right, .left {
    border-right: 3px solid #d6d6d6 !important; 
}

.top td {
    border-top :3px solid #d6d6d6; 
}

.bottom td {
    border-top: 3px solid #d6d6d6;
}

.bottom .left {
    border-top: none;
    border-right: none !important
}

.top .left {
    border-top: none;
}

.bottom .right {
    border-right: none !important;
}