Table rows with two lines of text

Question

Hi, I have two tables side by side. I need the rows to line up, but sometimes the content can be longer than the table row due to width constrictions on the page and it breaks and makes a two line table row.

Is it possible to make something like double rows that can hold two lines of text so everything lines up no matter if the content is 1 or 2 lines?

Thanks

Answer 1

You could add a (minimum) height to the table rows or cells (though it won't work in old browsers like IE6) with something like:

tr {
   min-height: 2em;
}

or

tr {
   min-height: 24px;
}

If you need it to work the same in IE6, you can add 'height: ...' instead.

Hope this helps!

Answer 2

Give the TD height:2.5em or so (You will have to play with this value, depends on other params like the margins/paddings/line-height you use.

Answer 3

You could solve this 2 ways, one would be to create rows with a fixed height like you propose, the other solution would be to create a big table with 3 columns where you remove the borders from the middle column so it looks like 2 tables.

The solution you were asking for could be as follows:

<style>
td { vertical-align: top; }
td div { height: 40px; overflow: hidden; }
</style>
<table width="400">
  <tr>
    <td><div>short content</div></td>
    <td><div>long content long content long content long content</div></td>
    <td><div>long content long content long content long content</div></td>
  </tr>
  <tr>
    <td><div>long content long content long content long content</div></td>
    <td><div>short content</div></td>
    <td><div>long content long content long content long content</div></td>
  </tr>
</table>