在HTML中创建带滚动条的table

                <div style="float:left;width:100%;">
                    <table class="life-table" style="border:4px solid #E78F28;" cellspacing="0">
                        <thead>
                        <tr>
                            <th class="life-title" width="35px"></th>
                            <th class="life-title" width="150px">9/2 周三</th>
                            <th class="life-title" width="150px">9/3 周四</th>
                            <th class="life-title" width="150px">9/4 周五</th>
                            <th class="life-title" width="13px"></th>
                        </tr>
                        </thead>
                       
                        <tbody style="overflow-y:scroll;overflow-x:hidden;height:100px;">
                        <tr>
                            <td class="life-title" height="22px">00:00</td>
                            <td align="center" style="background:red;color:white;">浏览网页</td>
                            <td align="center" style="background:yellow;">看书</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">01:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:green;color:white;">coding</td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">02:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:blue;color:white;">学英语</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">03:00</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                            <td align="center" style="background:green;color:white;">数据库</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">00:00</td>
                            <td align="center" style="background:red;color:white;">浏览网页</td>
                            <td align="center" style="background:yellow;">看书</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">01:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:green;color:white;">coding</td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">02:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:blue;color:white;">学英语</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">03:00</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                            <td align="center" style="background:green;color:white;">数据库</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

 

评：上述代码在Firefox里能work，但是在IE8不行。下面的代码使用两个表格，在Firefox和IE8中均正常。使用两个表格的缺点是，不容易将表头和内容对齐

                <div style="float:left;width:100%;height:auto;">
                    <table class="life-table" cellspacing="0" cellpadding="0">
                        <tr>
                            <th class="life-title" width="35px"></th>
                            <th class="life-title" width="150px">9/2 周三</th>
                            <th class="life-title" width="150px">9/3 周四</th>
                            <th class="life-title" width="150px">9/4 周五</th>
                            <td class="life-title" width="15px"></td>
                        </tr>
                    <tr><td colspan="5">
                    <div style="overflow-y:scroll;height:100px;">
                        <table cellspacing="0">                       
                        <tr>
                            <td class="life-title" height="22px">00:00</td>
                            <td align="center" style="background:red;color:white;">浏览网页</td>
                            <td align="center" style="background:yellow;">看书</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">01:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:green;color:white;">coding</td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">02:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:blue;color:white;">学英语</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">03:00</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                            <td align="center" style="background:green;color:white;">数据库</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">00:00</td>
                            <td align="center" style="background:red;color:white;">浏览网页</td>
                            <td align="center" style="background:yellow;">看书</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">01:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:green;color:white;">coding</td>
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">02:00</td>
                            <td align="center" style="background:#DEECFF;"></td>
                            <td align="center" style="background:blue;color:white;">学英语</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                        </tr>
                        <tr>
                            <td class="life-title" width="15px" height="22px">03:00</td>
                            <td align="center" style="background:#DEECFF;"></td>                           
                            <td align="center" style="background:green;color:white;">数据库</td>
                            <td align="center" style="background:#DEECFF;"></td>
                        </tr>
                        <tr>
                            <td width="35px"></td>
                            <td width="150px"></td>
                            <td width="150px"></td>
                            <td width="150px"></td>
                        </tr>
                        </table>
                    </div>
                    </td></tr>
                    </table>
                </div>