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