see613 see613 - 1 month ago 10
CSS Question

DIV with fixed width in TD with colspan

My code:

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


But result looks wrong. (jsFiddle_example)

How can I fix it?

Answer

The code looks wrong too. Your highest colspan setting is 5, but the most TDs in a row is three. Why is that?

Why not something like this:

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