Borders For Tables Hack

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I've been trying to figure out a good way to make a CSS layout with
nice-looking 1-pixel borders around the table cells.

The only broadly compatible way to do this I know of is to have

 * the border of the table set to zero
 * the cellspacing of the table set to one
 * the background color set to black
 * the table cell background color set to white

which looks nice in most modern browsers.

However in Netscape four, the table has no borders at all, making it a
little awkward for users to understand columns, rows etc.

So here's my workaround:

  <style type="text/css" >
    background: black;
    border-width: 0px;
    border-style: none;
    background: white;
<table border="1" bordercolor="#ffffff" cellspacing="1"
        <td> blah </td>
        <td> blah </td>
        <td> blah </td>

This is kind of a hack, but it means that IE sees one-pixel borders
and Netscape four and older see old-fashioned raised-type gray

It doesn't look so great in Netscape 7/Mozilla though, because they
don't recognise the bordercolor thing.

Also, bordercolor is not valid HTML.

Does anyone know a good way to achieve 1-pixel borders which works in
Netscape 4 and recent CSS-compatible browsers? I'd be interested to
see any other approaches -- I've been juggling different style sheets
and HTML combinations for a while now...

The only other way I know is the way they do it at Salon, which
involves lots of empty table cells with spacers in them and that's
just overkill.

Re: Borders For Tables Hack

Hostile17 wrote:
Quoted text here. Click to load it

The nr 1 problem with your request is NS 4.x. People are switching to NS
7.1 or to Mozilla-Firebird you know and a large majority of them are not
reverting back. Trying to control layout and rendering on old and
non-compliant browsers is a bad idea. As long as content is accessible
on such old and non-compliant browsers, I do not recommend trying to do
anything more.

FWIW, Dynamic table formatting for DOM 1 browsers:

Javascript and Browser bugs: /
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x

Re: Borders For Tables Hack

Hostile17 wrote:

Quoted text here. Click to load it

How about:

table { border-collapse: collapse; }
th, td { border: 1px solid black; }

Quoted text here. Click to load it

Hmm, did you say Netscape 4... that's no fun.

Site Timeline