CSS Table Borders

A

ameoba

Supreme [H]ardness
Joined
Jan 9, 2001
Messages
6,412
I'm working up some page templates and I need to do some tables. I can't quite get the CSS right on them, tho.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>
        table test
    </title>

    <style type="text/css">
        table.podDisplay {
            border-collapse: collapse;
            border: 2px solid black;
            width: 50em;
            text-align: center;
        }
        TD.podDisplay {
            border: 2px solid black;
            border-collapse: collapse;
        }
        .podDisplay.label{
            width: auto;
            text-align: center;
        }
        .podDisplay.desc{
            width: 10em
        }
        .podDisplay.reading{
            width: 10em
        }
        .podDisplay.change{
            width: 10em
        }
        .podDisplay.alarm{
            text-decoration:blink;
            color: red;
            font-weight: bold;
        }
        .podDisplay.warning{
            color: orange;
            font-weight: bold
        }
    </style>
</head>
<body>
    <table class="podDisplay"> <!-- data -->
        <tr>
            <td rowspan="6" class="podDisplay label">
                Barber
                <br/>
                2005-07-11 04:58:23-06
            </td>
        </tr>
        <tr>
            <td class="podDisplay desc">
                fgsfds
            </td>
            <td class="podDisplay reading">
                fgsfds fgsfds fgsfds fgsfds fgsfds fgsfds fgsfds fgsfds 
            </td>
            <td class="podDisplay change">
                fgsfds
            </td>
            <td class="podDisplay change">
                fgsfds
            </td>
            
        </tr>
        <tr class="podDisplay alarm">
            <td class="podDisplay desc">
                fgsfds
            </td>
            <td class="podDisplay reading">
                fgsfds fgsfds fgsfds 
            </td>
            <td class="podDisplay change">
                fgsfds
            </td>
            <td class="podDisplay change">
                fgsfds
            </td>
        </tr>
        <tr class="podDisplay warning">
            <td class="podDisplay desc">
                fgsfds
            </td>
            <td class="podDisplay reading">
                fgsfds fgsfds fgsfds 
            </td>
        </tr>
        <tr class="podDisplay">
            <td class="podDisplay desc">
                fgsfds
            </td>
            <td class="podDisplay reading">
                fgsfds fgsfds fgsfds 
            </td>
        </tr>
        <tr>
            <td class="podDisplay desc">
                fgsfds
            </td>
            <td class="podDisplay reading">
                fgsfds fgsfds fgsfds 
            </td>
            <td class="podDisplay change">
                fgsfds
            </td>
            <td class="podDisplay change">
                fgsfds
            </td>
        </tr>
    </table>
</body>
</html>

In IE6, it seems to display correctly but in Firefox 1.0.4 it's broken. The empty cells shouldn't have a border, the populated cells should have full borders and there should be a border around the outside. Firefox drops part of the outside border next to the empty cells, draws a border (but not full borders) through the empty cells and doesn't put a border on one of the populated cells next to the empty ones.

Is there something wrong with my CSS/HTML or is it just a browser glitch? If it's a glitch, what's a good workaround?



edit : somebody suggested validating the HTML, and I made a few changes. Still can't get it to work or pass. Also upgraded from FFox to 1.0.4 to 1.0.5 with no result.

edit : now valid xhtml
 
Narrowed it down to a Firefox bug with border collapse.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>
        table test
    </title>

    <style type="text/css">
        table{
            
            border: 2px solid black;
        }
        TD{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>

            <td>
                fgsfds
            </td>
            <td>
                fgsfds
            </td>
            <td>
                fgsfds
            </td>
        </tr>

        <tr>
            <td>
                fgsfds 
            </td>
        </tr>                
    </table>
</body>
</html>

is correct but
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>
        table test
    </title>

    <style type="text/css">
        table{
            border-collapse: collapse;
            border: 2px solid black;
        }
        TD{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>

            <td>
                fgsfds
            </td>
            <td>
                fgsfds
            </td>
            <td>
                fgsfds
            </td>
        </tr>

        <tr>
            <td>
                fgsfds 
            </td>
        </tr>                
    </table>
</body>
</html>
is not
 
You must log in or register to reply here.
Back
Top