带有幻影 `colspan` 的 HTML/CSS 表格

Question

我正在为一个简单的表格布局而苦苦挣扎，但它没有意义。似乎单元格“15 b”有一个 colspan=2，但它没有(我添加红色样式只是为了突出显示单元格)。关于为什么“Jack Black”的第二个单元从下午 1:00 而不是中午 12:30 开始，有什么建议吗？

每个小时的列宽为 2。

我在最新的 Chrome、FF、IE 中测试过，结果相同。

我的 fiddle :http://jsfiddle.net/sablefoste/9VLbh/

(缩写的)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>

和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%;
}

我很感激任何建议!

Answer 1

缺失的列并不是真的缺失，它只是没有宽度。因为标题跨越 2 列并且没有其他行专门使用它，所以该列折叠。

因此，如果您添加另一个使用所有列但不使用任何 colspan 的标题行，它就可以工作。像这样http://jsfiddle.net/9VLbh/5/