2010-07-25 151 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块,你应该全部设置!