如何使用css擺脫最後一個tr td底部邊界？

如何擺脫使用CSS的最後一個表格行底部邊框？我在HTML頁面上使用了顏色編碼來確定哪個邊框屬於哪個邊框。我可以看到，底部邊框需要被刪除，因爲它與我的容器邊界衝突：

<!DOCTYPE html> 
<html> 
<head> 

<style> 

/* ----- Scrolling Table ----- */ 
.dataGridHeader { 
position:relative; 
padding-top:24px; 
_padding-top:23px; 

width:895px; 

border-left: 1px solid red; 
border-bottom: 1px solid orange; 
} 

.dataGridContent { 
overflow:auto; 
width:915px; 
height:144px; 
} 

.dataGridHeader thead tr { 
width:915px; 
position:absolute; 
top:0; 
left:0; 
} 

.dataGridHeader table thead tr th, .dataGridHeader table tbody tr td { 
text-align:left; 
height:0; 
} 

table.scrolltablestyle { 
border-top: 1px solid #D9D9D9; 
} 

table.scrolltablestyle tbody tr td{ 
    background: #fff; 
    text-align:left; 
    padding: 4px 9px; 
    border-bottom: 1px solid #999; 
    border-right: 1px solid blue; 
} 
table.scrolltablestyle thead tr th{ 
background-color: #FFFFD9; 
font-weight: normal; 
text-align:left; 
padding: 4px 9px 4px 9px; 
border-bottom: 1px solid #999999; 
} 

table.scrolltablestyle thead tr th { 
    border-right: 1px solid blue; 
    border-top: 1px solid blue; 
} 

table.scrolltablestyle tbody tr td{ 
    border-right: 1px solid green; 
} 




</style> 



</head> 
<body> 

<div class="dataGridHeader"> 
    <div class="dataGridContent"> 
    <table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even"> 
     <thead> 
     <tr> 
      <th width="160">Shopper Name</th> 
      <th width="160">First Name</th> 
      <th width="160">Last Name</th> 
      <th width="160">User ID</th> 
      <th width="160">Status</th> 
     </tr> 
     </thead> 
     <tbody> 
    <tr> 
    <td width="160">C2C Fishing</td> 
    <td width="160">John</td> 
    <td width="160">Doe</td> 
    <td width="160">C2C Fishing</td> 
    <td width="160">Enabled</td> 
    </tr> 
    <tr> 
    <td width="160">C2C Fishing</td> 
    <td width="160">John</td> 
    <td width="160">Doe</td> 
    <td width="160">C2C Fishing</td> 
    <td width="160">Enabled</td> 
    </tr> 
    <tr> 
    <td width="160">C2C Fishing</td> 
    <td width="160">John</td> 
    <td width="160">Doe</td> 
    <td width="160">C2C Fishing</td> 
    <td width="160">Enabled</td> 
    </tr> 
    <tr> 
    <td width="160">C2C Fishing</td> 
    <td width="160">John</td> 
    <td width="160">Doe</td> 
    <td width="160">C2C Fishing</td> 
    <td width="160">Enabled</td> 
    </tr> 
    <tr> 
    <td width="160">C2C Fishing</td> 
    <td width="160">John</td> 
    <td width="160">Doe</td> 
    <td width="160">C2C Fishing</td> 
    <td width="160">Enabled</td> 
    </tr> 
    <tr> 
    <td width="160">C2C Fishing</td> 
    <td width="160">John</td> 
    <td width="160">Doe</td> 
    <td width="160">C2C Fishing</td> 
    <td width="160">Enabled</td> 
    </tr> 
    <tr> 
    <td width="160">C2C Fishing</td> 
    <td width="160">John</td> 
    <td width="160">Doe</td> 
    <td width="160">C2C Fishing</td> 
    <td width="160">Enabled</td> 
    </tr> 
    <tr> 
    <td width="160">C2C Fishing</td> 
    <td width="160">John</td> 
    <td width="160">Doe</td> 
    <td width="160">C2C Fishing</td> 
    <td width="160">Enabled</td> 
    </tr> 

     </tbody> 
    </table> 
    </div> 
</div> 
</body> 
</html>

來源

2013-03-08 John Smith

只要使用這個

table.scrolltablestyle tr:last-child td 
{ 
border-bottom:none; 
}

或者你可以像這樣設置

table.scrolltablestyle tr:last-child td 
{ 
border-bottom:0; 
}

來源

2013-03-08 20:25:39 Sachin

'border-bottom：none'適用於博風格。您最好使用'border-bottom：0' – otinanai 2013-03-08 20:28:44

感謝@otinanai您的建議，我在答案中添加了該選項並更新了我的帖子。 :) – Sachin 2013-03-08 20:36:50

薩欽，仍然無法正常工作。有沒有可能壓倒它的東西？我在工作中使用IE7。 – 2013-03-08 21:10:05

刪除此線 - ：

border-bottom: 1px solid orange;

來源

2013-03-08 20:25:07 suspectus

如何使用css擺脫最後一個tr td底部邊界？

回答

相關問題