html table有跨行跨列时,设置td宽度失效

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>

  

原文地址:https://www.cnblogs.com/ngy0217/p/15423855.html