css - Remove column dividers in a html table -
i have html table css. cells have white border around them, having trouble removing column borders each cell rows divided white line. similar table i'm trying achive can seen @ http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/, @ example 3 (the top table in example). far 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> </table> </body> </html>
looks there's slight error in table style: says border:collapse:collapse
should border-collapse: collapse;
.
from there, you'll need add border-bottom: 1px solid #fff;
table, th, td
block, , should set!
Comments
Post a Comment