Neverside

CSS Table Border not showing

I am trying to create a table to display some data and I want to set the border to be 1px. I have done this but my table only has a border around the outside and doesnt show each row, column or cell inside the actual table.

Code:

table {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #6D929B;
border: 1px solid #ccc;
}

Yeah CSS has a different model for borders with tables.

Applying it to the table puts it around the whole table, as you saw. Putting it around the cells will give you the grid you're looking for.

But putting td{ border: 1px #000 solid; } would create some overlap (try it, you'll see what I mean). So how to make it 1px everywhere?

It's slightly hackish but here you go:

Code:

table { border: 1px solid #000;
border-collapse: collapse;
border-width: 0 1px 1px 0;}

td{ border: 1px solid #000;
border-width: 1px 0 0 1px; }

border-collapse: collapse; essentially knocks out the margins between cells that most browsers deliver by default. Good luck with it!

___________________

Jon Culver Chia Pets