Member Avatar for crazyvonzipper

Hi there guys, I have quite a stupid question which for some reason I cannot wrap my head around.

I have a table with supposed 4 cells (2 rows x 2 columns) but I want to set the 2nd column's rowspan to 2 making 3 cells

<table>
    <tr>
        <td id="cell1" style="width: 1px">....</td>
        <td id="cell2" style="vertical-align: top">....</td>
    </tr>
    <tr>
        <td id="cell3" rowspan="2" style="vertical-align: top">....</td>
    </tr>
</table>

for some reason, cell 2 is aligned to the middle of cell 3 rather than starting directly below cell 1.

This issue occurs only in IE, obviously...

Any suggestions as to how I can make the cell 2 start immediately after cell 1 rather than starting in the middle of cell 3?

PS: Cell 3 has a lot of content and will have a height bigger than the content of cell 1 & 2 combined.

  • 1 Contributor
  • 1 Reply
  • 183 Views
  • 6 Minutes Discussion Span
  • Latest Post Latest Post by crazyvonzipper

Dani AI

Generated

Short version: the rowspan cell must appear in the row where the span begins. In practice the easiest fix is to move the tall (rowspanned) cell into the first <tr> so the browser can compute row heights correctly — that resolves the IE centering you described without nesting a new table.

Example (place the spanning cell in the top row):

<table>
  <tr>
    <td id="leftTop">Top-left content</td>
    <td id="rightSpan" rowspan="2" style="vertical-align: top;">Tall right-column content</td>
  </tr>
  <tr>
    <td id="leftBottom" style="vertical-align: top;">Bottom-left content</td>
  </tr>
</table>

Troubleshooting checklist:

  • Ensure a standards doctype (for example <!DOCTYPE html>) so IE isn’t in quirks mode — many table-layout bugs vanish with a proper doctype.
  • Apply a global rule td { vertical-align: top; } (or use valign="top" as an old-IE fallback) so all cells use the same baseline.
  • Avoid conflicting explicit heights on rows/cells; if you need fixed widths/heights use table-layout: fixed and explicit column widths.
  • If the tall cell contains floats or positioned elements, wrap its content in a block and clear floats so the cell’s height is calculated predictably.

— nesting a table will work as a last resort, but fixing markup/doctype and using the pattern above is cleaner and more robust across browsers.

Member Avatar for crazyvonzipper

Seems like the only way is to add another table in cell 1 rather than having a rowspan.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.