table中colspan统制

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

查看更多 下一篇