Home/ Questions/Q 442351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T21:03:48+00:00

I have an example of a simple HTML table that contains a number of

  • 0

I have an example of a simple HTML table that contains a number of div blocks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
  <table border=1 width="1000px" >
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr valign="top"><td colspan="1"  ><div style="width:180px;border: solid 1px black;">1</div></td><td colspan="3"  ><div style="width:770px;border: solid 1px black;">2</div></td></tr>
    <tr valign="top"><td colspan="4"  ><div style="width:960px;border: solid 1px black;">3</div></td></tr>
    <tr valign="top"><td colspan="2"  ><div style="width:475px;border: solid 1px black;">4</div></td><td colspan="2"  ><div style="width:475px;border: solid 1px black;">5</div></td></tr>
  </table>
</body>
</html>

The problem is that the look of row 2 is not correct. The colspans are not behaving as expected. If I remove the fourth line then the second behaves correctly.

I am aware that divs and CSS is the way to go but for this application, at this time, this is not possible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your problem is auto table layout. It’s hard for a browser to look at all the cells and work out how much width each is going to get from their content; it’s double-hard when there are colspans (especially in this example where there’s no way to tell how wide columns 3 and 4 should be at all); and it’s triple-hard when you’re poor old hard-of-thinking Internet Explorer, bless.

    Don’t make your browser struggle, wheeze and render slowly: use fixed table-layout and declare the width of every column exactly. Normally this would be done with <col> elements:

    #thing { width: 950px; table-layout: fixed; border-spacing: 0; }
#thing .wide { width: 295px; }
#thing .narrow { width: 180px; }
#thing.box { border: solid black 1px; }

<table id="thing">
    <col class="narrow" /><col class="wide" /><col class="wide" /><col class="narrow" />
    <tr>
        <td colspan="1"><div class="box">1</div></td>
        <td colspan="3"><div class="box">2</div></td>
    </tr>
    <tr>
        <td colspan="4"><div class="box">3</div></td>
    </tr>
    <tr>
        <td colspan="2"><div class="box">4</div></td>
        <td colspan="2"><div class="box">5</div></td>
    </tr>
</table>

    However there is a bug in Webkit that ignores <col> widths when there is no single unspanned cell in that column. This is quite unusual for tables, but it is the case in the above example: only the first column contains an unspanned cell. To work around it, you can either replace the <col> elements with a dud row at the start, styled to have minimal height:

    #thing .cols td { height: 1px; line-height: 1px; font-size: 1px; }

<tr class="cols">
    <td class="narrow"></td><td class="wide"></td><td class="wide"></td><td class="narrow"></td>
</tr>

    Or, sometimes less intrusive, keep the <col>s and add a dud row at the bottom:

    <tr class="cols"><td></td><td></td><td></td><td></td></tr>
    • 0