删除表格单元格的边框

问题描述：

我有一个动态生成的表格结构。桌子桌子有一个棘手的样式。删除表格单元格的边框

我已经添加了边界顶部和右边的直接表，我需要的是删除/边框颜色table的td边框颜色操作。

如果你能看到我的小提琴，我需要用橙色的轮廓包裹橙色的桌子。同时1px到td的边界应保持不变。

如果我尝试给单元格的边框顶部，然后白色边框崩溃。

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 +

答

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

对不起忘了提..我不能使用伪类，因为它没有得到IE版本的广泛支持 – Sowmya

我需要这种结构来支持IE7 +所以.. – Sowmya

是的我可以在第一行顶部白色边框上添加类 – Sowmya

答

试试这个：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td class="left">how to remove top border from this cell?</td> 
    <td class="top">vb</td> 
    <td class="top">X</td> 
    <td class="topRightCorner">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> 
    <td class="noborder">4</td> 
    <td class="bottom">r</td> 
    <td class="bottom">r</td> 
    <td class="bottom">how to remove right border from this cell?</td> 
    </tr> 
</table> 

</body> 
</html>

以及与此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{ 
    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:3px solid #d6d6d6 !important; 
} 
.right{ 
    border-right:3px solid #d6d6d6 !important; 
} 
.topRightCorner{ 
    border-top:3px solid #d6d6d6 !important; 
    border-right:3px solid #d6d6d6 !important; 
}

答

添加

position:relative; top:-3px; padding-top:3px; /* to adjust the nudge */

到类.left

而且

position:relative; right:-3px; padding-right:3px; /* to adjust the nudge */

到类.bottom

这应该在IE7中工作。

答

演示第一（我在IE7,8,9,10测试这个问题，以及最新的Chrome和Firefox）：

http://jsbin.com/ImEvAGoJ/5

我用的border和box-shadow组合来实现双边界效应。当然box-shadow不支持IE8及更低版本，所以我不得不使用相当于DropShadow的筛选器（more info）。例如：

.table_main .top.right { 
    box-shadow: 1px 0 white, 4px 0 #d6d6d6, 
       0 -1px white, 0 -4px #d6d6d6, 
       1px -1px white, 4px -4px #d6d6d6; 
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color='#00ffffff', Positive='true'), 
      progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color='#00ffffff', Positive='true'), 
      progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color='#00ffffff', Positive='true'), 
      progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color='#00ffffff', Positive='true'), 
      progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-3, Color='#00d6d6d6', Positive='true'), 
      progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=0, Color='#00d6d6d6', Positive='true'); 
}

注意，灰色box-shadow是4px宽，因为它与重叠1px白色阴影。

另外，这里假定你可以改变你桌子上的类，我认为你说你可以在上面的一个评论中做的。

基本上，使用outside类，分别bottomright类顶行，左边一列，下排，右列单元格是你的灰色边框，top，left，边所有单元格。你的HTML应该是这样的：

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

更新：这里有截图，从IE7在Vista上，IE8在WinXP和IE8 Win7上：

Screenshot from IE7 on Vista

Screenshot from IE8 on WinXP

enter image description here

这不是在ie7和8灰色边框 – Sowmya

@Sowmya这很奇怪。我刚刚添加了针对IE7和8的屏幕截图。您正在测试什么浏览器/操作系统版本？ – myajouri

windows 7 ....... – Sowmya

答

您可以结合Morpheus和Suraj Naik提供的解决方案。

IE 8支持第一胎，但它不支持最后的孩子，所以你可以用

tr+tr+tr+tr td+td+td+td.bottom {

更换

table > tbody > tr:last-child > td:last-child

到达最后一个单元格。

对于IE7，您可以添加由苏拉杰奈克在条件注释提供的代码：

<!--[if lt IE 8]> 
... 
<![endif]-->

您可以在下面找到完整的CSS：

<style> 
.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; 
} 
table > tbody > tr:first-child > td:first-child 
{ 
    margin-top: -3px; 
    float: left; 
} 

tr+tr+tr+tr td+td+td+td.bottom { 
    margin-right: -3px; 
    float: right; 
    padding-left: 4px; 
} 
</style> 
<!--[if lt IE 8]> 
<style> 
.left{ 
    position:relative; top:-3px; padding-top:3px; /* to adjust the nudge */ 
} 
.bottom{ 
    position:relative; right:-3px; padding-right:3px; /* to adjust the nudge */ 
} 
</style> 
<![endif]-->

答

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

答

如果您可以进一步更改TD类从表中删除边框样式{}并将类名称应用于您希望接收灰色边框的元素。

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

然后添加其他类右边框样式：

td.rightBorder { border-right: 3px solid #D6D6D6; }

确保两个类名添加到包含“G”的单元格。

删除表格单元格的边框

相关推荐