六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 143|回复: 0

table中colspan控制

[复制链接]

升级  52%

4

主题

4

主题

4

主题

童生

Rank: 1

积分
26
 楼主| 发表于 2013-2-7 19:43:23 | 显示全部楼层 |阅读模式
表格中如果增加了 colspan 属性,如果colspan所在属性td或th元素宽度大于表格中固定宽度时,表格将不再固定,而是自适应,如
<table border='1' width="100%" style='table-layout: fixed;'><tr>    <td width='100' >1</td>    <td width='150'>1</td>    <td>1</td></tr><tr>    <td colspan='3'><div style="width:700px;background-color:red;"></div></td></tr><tr>    <td>1</td>    <td>1</td>    <td>1</td></tr></table>此时表格中 首行 td width属性将不再有效。如何固定宽度。一般在表格中定义属性
table-layout: fixed;使其固定
如果一下情况colspan 在第一行情况下 ,td中也将失效
<table border='1' width="100%" style='table-layout: fixed;'><tr>    <td colspan='3'><div style="width:700px;background-color:red;"></div></td></tr><tr>    <td width='100' >1</td>    <td width='150'>1</td>    <td>1</td></tr><tr>    <td>1</td>    <td>1</td>    <td>1</td></tr></table>
这时可以在最上边加以下代码来控制td宽度
<colgroup>       <col width=60%></col>       <col width=20%></col>       <col width=20%></col></colgroup>
如:
<table border='1' width="100%" style='table-layout: fixed;'><colgroup>       <col width='100'></col>       <col width='150'></col>       <col ></col></colgroup><tr>    <td colspan='3'><div style="width:700px;background-color:red;"></div></td></tr><tr>    <td width='100' >1</td>    <td width='150'>1</td>    <td>1</td></tr><tr>    <td>1</td>    <td>1</td>    <td>1</td></tr></table>转载:http://blog.sina.com.cn/s/blog_506d9e2001018254.html
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表