table中colspan统制 _Web前端

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