CODEWITHSUNDEEP
htmlcsscss-tables
user1245706
user1245706

Reputation: 151

CSS html tables left and right border

I'm trying to write some CSS that will make it so my html table only has borders horizontally, and no borders vertically in 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>

This results in a table with white borders on all sides. Any ideas what I'm 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 exact css into dreamweaver and then ftp to my server I am still getting thin white lines in-between each cell. image http://img267.imageshack.us/img267/9135/temppb.jpg

Also just noticed that if I turn off normalized in fiddle that the borders appear on the table there.

Everything is running on an Ubuntu server, I'm building it in winXP and then ftp to Apache, so there might be some permission problems interfering with the CSS?

Upvotes: 3

Views: 55898

Answers (4)

Starx
Starx

Reputation: 78991

I think this is enough

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

Demo

Upvotes: 0

jacktheripper
jacktheripper

Reputation: 14219

This can be achieved simply using 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

Upvotes: 3

Steve
Steve

Reputation: 8640

I might be wrong, but from just looking at your code, you never "remove" the borders on the left and right. 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;
}

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Try removing the left and right borders from the th cells, and see if that fixes the problem.

If it does, set the border-left and border-right on the td cells to be the same colour as the background, to "hide" them.

Upvotes: 0

Related Questions