刪除表格單元格的邊框

我有一個動態生成的表格結構。桌子桌子有一個棘手的樣式。刪除表格單元格的邊框

我已經添加了邊界頂部和右邊的直接表，我需要的是刪除/邊框顏色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 +

來源

2013-12-20 Sowmya

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

來源

2013-12-20 09:59:22

對不起忘了提..我不能使用僞類，因爲它沒有得到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; 
}

來源

2013-12-23 07:45:38

添加

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中工作。

來源

2013-12-24 06:33:26

演示第一（我在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

來源

2013-12-24 12:49:40 myajouri

這不是在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]-->

來源

2013-12-26 13:01:47 mali303

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

來源

2013-12-26 13:06:40

如果您可以進一步更改TD類從表中刪除邊框樣式{}並將類名稱應用於您希望接收灰色邊框的元素。

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

然後添加其他類右邊框樣式：

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

確保兩個類名添加到包含「G」的單元格。

來源

2013-12-28 09:23:02 Roleat

刪除表格單元格的邊框

回答

相關問題