CODEWITHSUNDEEP
htmlcsshtml-tableformatting
Sablefoste
Sablefoste

Reputation: 4192

HTML/CSS table with phantom `colspan`

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!

Upvotes: 1

Views: 656

Answers (2)

RK M
RK M

Reputation: 55

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.

Upvotes: 1

DavidG
DavidG

Reputation: 119017

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/

Upvotes: 1

Related Questions