Clever Geek Handbook

Css html tables left and right borders

I am trying to write some css that will make my html table only have borders horizontally, and no borders vertically between columns.

here is what I have so far:

@charset "utf-8";
/* CSS Document */

<style type="text/css">

box-table-a{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    /*border-width: 0px;
    border-left: 0px;
    border-right: 0px;*/
    border-collapse: collapse;
}

#box-table-a th{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe;
    border-right:1px solid #b9c9fe;
    border-left:1px solid #b9c9fe;
    border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: #039;
}
#box-table-a td{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid transparent;
}
#box-table-a tr:hover td{
    background: #d0dafd;
    color: #339;
}
</style>

The result is a table with white borders on all sides. Any ideas what I am doing wrong?

EDIT I ​​can get it to do what I want here: http://jsfiddle.net/QZwt5/26/ but when I take this exact table and the exact css in Dreamweaver and then ftp to my server, I still get thin white lines between each cell. image http://img267.imageshack.us/img267/9135/temppb.jpg

Also noticed that if I turn off the normalized in the fiddle so the borders are displayed on the table.

Everything works on ubuntu server, I build it in winXP and then ftp to apache, so there might be some resolution issues preventing CSS?

+3


source to share


4 answers


This can be achieved simply with CSS

Html

<table border="1" id="table">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>

<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>

<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
</tr>
</table>​


CSS

tr {
    border: 1px solid black;
}
td {
    border: 0;
    width: 100px;
}​

Live example

+3


source


I may be wrong, but just by looking at your code you never remove left and right borders. Try adding



#box-table-a td{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    border-left: none;
    border-right: none;
    color: #669;
    border-top: 1px solid transparent;
}
+1


source


Try removing the left and right borders from the cells th

and see if that fixes the problem.

If so, set the border-left

and border-right

cells to td

the same color as the background to "hide" them.

0


source


I think that's enough

table tr { border: 1px #000 solid; }

Demo

0


source






More articles:


All Articles