Is there any way to make vertical lines in a table, with JavaScript, HTML or CSS, if the table is missing some of the TDs?

Question

Basically, I would like vertical lines to go all the way to the top of my table, even if there is not a td in the top top of the table.

I am open to using divs or seomthing like that is if it is not too complex.

EDIT: I guess what I want are column dividers, even if there is not tds in that particular row.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>sample</title>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
        <style type="text/css">
            .sample td{border-left: 1px solid red}
        </style>
    </head>
    <body>
        <table cellspacing='0' class='sample'>
            <tr>
                <td>Test</td><td>Test</td>
            </tr>
            <tr>
                <td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td>
            </tr>
            <tr>
                <td>Test</td><td>Test</td><td>Test</td><td>Test</td>
            </tr>
        </table>
    </body>
</html>

Uhm, by 'vertical lines' you mean cell borders? BTW, there can't be more cells in a row than in another, use colspan if you want to fill extra space avoiding writing empty — Damien Pirsy, Jan 30 '11 at 17:38
I do not want the tds to get wider. If I used colspan, it will make the tds wider. — GC_, Jan 30 '11 at 17:41
Where do these vertical lines come from?? anyway, I believe you should write an equal number of s if you don't want to use colspan — Damien Pirsy, Jan 30 '11 at 17:49
How do you know which cell is missing? Taking the first row, there are 3 cells missing, which ones? 1,2,3 or 3,4,5 or whatever? Where does the table came from? — Dr.Molle, Jan 30 '11 at 18:02
What I can't do it make the vertical lines. I am producing this HTML on the on fly. I would like to do it in one pass. I don't know ahead of time how many td the longest row will have. — GC_, Jan 30 '11 at 18:03
If I write the extra TDs in, that will require a second pass through the data to add the correct number of TDs. One pass to count the max length, and then a second pass to make all the columns that length. — GC_, Jan 30 '11 at 18:05
I guess I am hoping for a way to avoid haivng to do the second pass. — GC_, Jan 30 '11 at 18:05
If you want to avoid the 2nd pass you should show us the first one :) — Dr.Molle, Jan 30 '11 at 18:07
The first pass just splits up each row, by a delimiter and produces tds. — GC_, Jan 30 '11 at 18:09
However, I don't know how many occurrences of the delimiter there is. — GC_, Jan 30 '11 at 18:10
[bad solution] use a background image of a grid the size of your table cells, which repeats along the x axis so to fill the space where there are missing s while giving the impression of there being a cell. — Damien Pirsy, Jan 30 '11 at 18:13
This really is not a CSS problem I guess. I guess have to change the data, like you mentioned below. — GC_, Jan 30 '11 at 18:25
If you would provide HOW you fetch these datas, then we can help you better in solving this problem! Post the code that gives you this set of datas, and let's see what can be done. — Damien Pirsy, Jan 30 '11 at 18:31

score 1 · Accepted Answer · answered Jan 30 '11 at 18:02

Rewrite like this, is this what you are trying to achieve?

<body>
            <table cellspacing='0' class='sample'>
                <tr>
                    <td>Test</td><td>Test</td><td></td><td></td><td></td>
                </tr>
                <tr>
                    <td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td>
                </tr>
                <tr>
                    <td>Test</td><td>Test</td><td>Test</td><td>Test</td><td></td>
                </tr>
            </table>
</body>

Is there any way to make vertical lines in a table, with JavaScript, HTML or CSS, if the table is missing some of the TDs?

1 Answers1