html table有跨行跨列时,设置td宽度失效
在table里,tr前,加上这个
<colgroup> <col width="20%"></col> <col width="40%"></col> <col width="40%"></col> </colgroup>
有几列,就设置几列的比例或具体宽度
<table id="timetable" border="1" cellspacing="0" cellpadding="0" style="margin:0;padding:0;table-layout:fixed;"> <colgroup> <col width="20%"></col> <col width="40%"></col> <col width="40%"></col> </colgroup> <tr> <td class="tcenter" colspan="2">项目</td> <td class="tcenter">时间</td> </tr> <tr> <td class="tcenter" rowspan="6">上<br/>午</td> <td class="tcenter">起床</td> <td class="tcenter">06:30</td> </tr> <tr> <td class="tcenter">早操</td> <td class="tcenter">07:00</td> </tr> <tr> <td class="tcenter">预备上课</td> <td class="tcenter">08:10</td> </tr> <tr> <td class="tcenter">第1-2节课</td> <td class="tcenter">08:15-09:45</td> </tr> <tr> <td class="tcenter">大课间</td> <td class="tcenter">09:45-10:05</td> </tr> <tr> <td class="tcenter">第3-4节课</td> <td class="tcenter">10:05-11:35</td> </tr> <tr> <td class="tcenter">中午</td> <td class="tcenter">午餐/午休</td> <td class="tcenter">11:40-13:35</td> </tr> <tr> <td class="tcenter" rowspan="4">下<br/>午</td> <td class="tcenter">预备上课</td> <td class="tcenter">13:35</td> </tr> <tr> <td class="tcenter">第5-6节课</td> <td class="tcenter">13:40-15:10</td> </tr> <tr> <td class="tcenter">大课间</td> <td class="tcenter">15:10-15:20</td> </tr> <tr> <td class="tcenter">第7-8节课</td> <td class="tcenter">15:20-16:50</td> </tr> <tr> <td class="tcenter" rowspan="4">晚<br/>上</td> <td class="tcenter">预备</td> <td class="tcenter">18:20</td> </tr> <tr> <td class="tcenter">晚自习课</td> <td class="tcenter">18:30-20:00</td> </tr> <tr> <td class="tcenter">自理</td> <td class="tcenter">20:00-21:50</td> </tr> <tr> <td class="tcenter">就寝、熄灯</td> <td class="tcenter">22:00</td> </tr> </table>