具有固定宽度的DIV，具有colspan

Question

我的代码：

<table style="width: 500px;">
        <tr>
            <td colspan="5">
                <div style="width: 500px;">colspan_5</div>
            </td>              
        </tr>
        <tr>
            <td colspan="1">
                <div style="width: 100px;">colspan_1</div>
            </td> 
            <td colspan="3">
                <div style="width: 300px;">colspan_3</div>
            </td>                
            <td colspan="1"> 
                <div style="width: 100px;">colspan_1</div>
            </td>               
        </tr>  
        <tr>
            <td colspan="2">
                <div style="width: 200px;">colspan_2</div>
            </td> 
            <td colspan="3">
                <div style="width: 300px;">colspan_3</div>
            </td>                
        </tr> 
        <tr>
            <td colspan="5">
                <div style="width: 500px;">colspan_5</div>
            </td>                                
        </tr> 
</table>​

但结果看起来不错。 （jsFiddle_example）

我该如何解决？

Answer 1

代码看起来也错了。您的最高colspan设置为5，但连续最多TDs为3。那是为什么？

为什么不这样：

<table style="width: 500px;">
    <colgroup>
        <col style="width:100px;" />
        <col style="width:200px;" />
        <col style="width:100px;" />
    </colgroup>
    <tr>
        <td colspan="3">
            <div>colspan_5</div>
        </td>              
    </tr>
    <tr>
        <td>
            <div>colspan_1</div>
        </td> 
        <td>
            <div>colspan_3</div>
        </td>                
        <td> 
            <div>colspan_1</div>
        </td>               
    </tr>  
    <tr>
        <td>
            <div>colspan_2</div>
        </td> 
        <td colspan="2">
            <div>colspan_3</div>
        </td>                
    </tr> 
    <tr>
        <td colspan="3">
            <div>colspan_5</div>
        </td>                                
    </tr> 
</table>​