读书人

table中colspan统制

发布时间: 2012-08-31 12:55:03 作者: rapoo

table中colspan控制
表格中如果增加了 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

读书人网 >Web前端

热点推荐