HTML/CSS table with phantom `colspan`

Question

I am struggling with a simple table layout, but it doesn't make sense. It seems the cell "15 b" has a colspan=2, but it does not (I added red styling just to highlight the cell). Any suggestion as to why the second cell with "Jack Black", starts at 1:00pm rather than at 12:30pm?

Each hour has a 2 column width.

I have tested in the latest of Chrome, FF, IE with the same result.

My fiddle: http://jsfiddle.net/sablefoste/9VLbh/

The (abbreviated) HTML:

<div class='timetablecontainer'>
    <table class='timetable'>
        <thead>
            <tr>
                <th class='timeheader' colspan='2'>8am</th>
                <th class='timeheader' colspan='2'>9am</th>
                <th class='timeheader' colspan='2'>10am</th>
                     ...
                <th class='timeheader' colspan='2'>8pm</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="day" colspan='50'>May 25 , 2014</td>
            </tr>
            <tr>
                <td class='employeeTR' colspan='4' style='border-left:solid #000;border-right:solid: #000;' title='Jack Black is out from 8:00am to 10:00am'>Jack Black</td>
                <td class='openOtime'>11 b</td>
                <td class='openEtime'>12 a</td>
                <td class='openOtime'>13 b</td>
                <td class='openEtime'>14 a</td>
                <td class='openOtime' style="background:red;">15 b</td> <!-- No COLSPAN here -->
                <td class='employeeTR' colspan='8' style='border-left:solid #000;border-right:solid: #000;' title='Jack Black is out from 12:30pm to 4:30pm'>Jack Black</td>
            </tr>
            <tr>
                <td class="day" colspan='50'>May 26 , 2014</td>
            </tr>
                    ...
            <tr>
                <td class="day" colspan='50'>May 29 , 2014</td>
            </tr>
            <tr>
                <td colspan='50' class='daymessage'> <b>Nobody has been scheduled for May 29 , 2014.</b>
                </td>
            </tr>
        </tbody>
    </table>
</div>

and the CSS:

table.timetable {
    border-collapse:collapse;
    background: #dcb;
}
.timeheader {
    min-width: 100px;
    border:thin solid black;
}
.day {
    border:solid black thin;
    background:blue;
    color:white;
    width:120px;
    padding:5px;
    font-weight:bold;
    min-width:136px;
}
.daymessage {
    background:#feedba;
    padding: 10px 0 10px 100px;
}
.employeeTR {
    background: #fff;
    border: thin solid black;
    text-align:center;
    padding: 5px 0 5px 0;
    white-space:nowrap;
}
.openEtime {
    border-left: solid #888 thin;
    border-right: solid #000;
    width:100%;
}
.openOtime {
    border-right: solid #888 thin;
    width:100%;
}

I appreciate any suggestions!

score 1 · Accepted Answer · answered May 24 '14 at 01:42

1

The missing column isn't really missing, it's there just has no width. Because the header spans 2 columns and there is no other row specifically uses it, the column collapses.

So, if you add another header row that uses all columns without any colspan, it works. Like this http://jsfiddle.net/9VLbh/5/

answered May 24 '14 at 01:42

DavidG

113,891
12
217
223

1

This definitely works! I just tried adding a row filled with `` for each hour, and CSS of `.headerspacer{width:100%;)`. Thank you for helping me solve a difficult problem! – Sablefoste May 24 '14 at 02:06

score 1 · Answer 2 · edited May 23 '17 at 12:11

Because there is no content in the cell in the same cellspan="2", the 15B cell consumes all (or nearly all) of the width. To avoid this issue, you need to give all of your cells some width, even if they don't have any content. DavidG's answer accomplishes this by adding some content to each column so that widths can be determined, but if you want to have empty cells and avoid adding that content, you can use the css width property style="width: ###px;"

This related question provides some useful suggestions on how to achieve equal cell spacing in an HTML table.

Your question got me wondering why table-layout: fixed didn't solve the issue: as this page explains, with a fixed table layout, only the first row is used for the layout and the first row doesn't give any sense of how wide the 15B column should be.

This is interesting too, however with the nature of my table, it will dynamically change depending upon the server's needs (for example, may break hours into 1/3 increments) You can't change CSS on the fly except inline (as you listed) and that would be a lot of extra styling in the HTML. I think @DavidG's answer is most appropriate for my situation (with my comment), but +1 for mentioning the table-layout. — Sablefoste, May 24 '14 at 02:42

HTML/CSS table with phantom `colspan`

2 Answers2