html - 带有 colspan 的 TD 中固定宽度的 DIV

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，但连续最多的 TD 是三个。这是为什么？

为什么不是这样的:

<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>​