Hugene - 7:23 pm on Oct 13, 2010 (gmt 0)

I have the following (simplified) code:

<table> <tr> <td> <div style="border-right: 3px dotted black;"> Column1: Lots of content in here, with divs, etc... Longer than Column 2 </div> </td> <td> <div style="border-right: 3px dotted black;"> Column 2: Some shorter content here </div> </td> </tr> </table>

But for the Column 2, the <div> that creates the dotted horizontal line on the right side, only extends to the end of the content in the div.

So this the age old question: how do I stretch the <div> with the dotted horizontal line to match the size of the <td>?

Or maybe the 2nd <td> isn't even as big as the 1st (even though the Firebug highlighting functionality shows that the 2 <td> have the same vertical length.