zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    重剑无锋
    PHP session用redis存储
    Beego 和 Bee 的开发实例
    谁是最快的Go Web框架
    Go语言特点
    计算机组成原理之机器
    Elasticsearch 健康状态处理
    Elasticsearch 的一些关键概念
    Elasticsearch 相关 api 操作
    Elasticsearch 在 windows 和 ubuntu 下详细安装过程
  • 原文地址:https://www.cnblogs.com/ngy0217/p/15423855.html
Copyright © 2011-2022 走看看