2010-07-25 148 views
3

我有一個CSS表的CSS。目前所有的單元格都有一個白色邊框,我無法移除每個單元格的列邊框,因此行被白線分隔。我在http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/上看到一個類似的表格,我們可以看到示例3(本例中的頂層表格)。到目前爲止,我的代碼如下所示:刪除html表中的列分隔符

<html> 
<head> 
<style type="text/css"> 
table, td, th 
{ 
font-family:calibri; 
border:collapse:collapse; 
} 
th 
{ 
background-color:#b9c9fe; 
color:#006add; 
} 
td 
{ 
background-color:#e8edff; 
color:#666699; 
} 
</style> 

<body> 
<table cellpadding="5" > 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Savings</th> 
</tr> 
<tr> 
<td>Peter</td> 
<td>Griffin</td> 
<td>$100</td> 
</tr> 
<tr> 
<td>Lois</td> 
<td>Griffin</td> 
<td>$150</td> 
</tr> 
<tr> 
<td>Joe</td> 
<td>Swanson</td> 
<td>$300</td> 
</tr> 
<tr> 
<td>Cleveland</td> 
<td>Brown</td> 
<td>$250</td> 
</tr> 
</table> 
</body> 
</html> 

回答

7

貌似有一個在表格樣式略有誤差:它說border:collapse:collapse它應該是border-collapse: collapse;

從那裏,你只需要添加border-bottom: 1px solid #fff;table, th, td塊,你應該全部設置!