Welcome to WebmasterWorld Guest from 54.167.157.247

Forum Moderators: incrediBILL

Message Too Old, No Replies

Getting a <div> to fill a whole <td>

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

10+ Year Member



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.
8:09 pm on Oct 13, 2010 (gmt 0)

5+ Year Member



Your post has me quite confused. When you say horizontal dotted line, I assume you mean to say vertical? From your code your div should be the same size as its <td> container(firebug confirms this).

You can vary the height of either div to expand it down:

<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;min-height:200px">
Column 2:

Some shorter content here
</div>
</td>

</tr>
</table>


What exactly are you trying to do?
8:11 pm on Oct 13, 2010 (gmt 0)

5+ Year Member



I should have added in that code that if you want to keep the text aligned you could add style="vertical-align:top" to your column1 <td>
1:33 am on Oct 14, 2010 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<td>
<div style="border-right: 3px dotted black;">

The usage of a div here seems redundant - you should be styling the td elements instead:

<td style="border-right: 3px dotted black;">


As the table cells are the same height the border will be the same length. You don't need to set the min-height at all.
12:08 pm on Oct 14, 2010 (gmt 0)

5+ Year Member



I was assuming (probably incorrectly) that he wanted column 2 to expand down past the end of column 1. For that he would need the div as each <td> would grow to match the other. Although in this case he could use just the <div> tags without the need for the table.