Question

我正在努力使用简单的表格布局，但它没有意义。好像是电池＆＃34; 15 b＆＃34;有一个colspan=2，但它没有（我添加了红色样式只是为了突出显示单元格）。关于为什么第二个单元格＆＃34; Jack Black＆＃34;为什么在下午1点开始而不是在12:30开始的任何建议？

每小时有2列宽。

我已经在最新的Chrome，FF，IE中测试了相同的结果。

我的小提琴：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/

Answer 2

因为同一cellspan="2"中的单元格中没有内容，所以15B单元格消耗所有（或几乎全部）宽度。为避免此问题，您需要为所有单元格提供一定的宽度，即使它们没有任何内容。 DavidG的答案通过向每个列添加一些内容以确定宽度来实现这一点，但如果您想要空单元格并避免添加该内容，则可以使用css width属性style="width: ###px;"

This related问题提供了一些有关如何在HTML表格中实现相等单元格间距的有用建议。

你的问题让我想知道为什么table-layout: fixed没有解决问题：as this page explains，使用固定的表格布局，只有第一行用于布局而第一行没有＃＆＃ 39;不要理解15B柱应该有多宽。

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

2 个答案: