Remove column dividers in a html table_问答_开发者

开发者 https://www.devze.com 2023-01-09 07:15 出处：网络

I have a html table with CSS. Currently all the cells have a white border around them, I am having trouble removing the column borders for each cell so the rows are divided by a white line. A similar

相关专题：css html-table

I have a html table with CSS. Currently all the cells have a white border around them, I am having trouble removing the column borders for each cell so the rows are divided by a white line. A similar table to what I'm trying to achive can be seen at http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/, look at example 3 (the top table in this example). So far my code looks like:

<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>
</tabl开发者_如何学运维e>
</body>
</html>

Looks like there's a slight error in the table style: it says border:collapse:collapse where it should be border-collapse: collapse;.

From there, you'll just need to add border-bottom: 1px solid #fff; to the table, th, td block, and you should be all set!