How to prevent a cell from expanding from a wider cell in row beneath it
I am using the Yahoo YUI
styling on my pages.
I have the folowing HTML:
<table>
<tr>
<td>Text1</td>
<td>Text2</td>
<td>Text3</td>
</tr>
<tr>
<td>Text4</td>
<td colspan="2">Text5 Text6 Text7 Text 8</td>
</tr>
</table>
The second row's second column is wider than that 2 columns containing Text2 and Text3. Now because if this the cell containind Text3 is not next to the cell containing Text2. I need it to be l开发者_JAVA技巧ike this but it seems to divide up the space between Text2 and Text3 (because of the longer column beneath it.
I thought that by making it to colspan of 2 would prevent this but it is not working. I only want the cell containing Text3 to take up the rest of the space. So what I am looking for is something like:
Text1 Text2 Text3
Text4 Text5 Text6 Text7 Text8
...and not:
Text1 Text2 Text3
Text4 Text5 Text6 Text7 Text8
I don't want to specify widths.
One way to achieve this is to display your table cells inline:
td{display:inline;}
Demo: http://jsfiddle.net/eGs6h/1/
Alternatively you can float your table cells left.
td{float:left;}
Demo: http://jsfiddle.net/eGs6h/2/
I prefer the inline method myself.
You could also just use <TD ALIGN="left">
for the Text3 td.
UPDATE:
Ok...I see... Basically, tables automatically size for the contents so your given your html it will stretch the top right 2 cells out (as you described)... Unfortunately, without sizing them you'll be forced to coerce them into appearing correct. There are probably several ways to do that, but 1 way would be to place Text2 and Text3 in the cell that currently only contains Text2. Another way would be to add another td cell...
<table border=1>
<tr>
<td>Text1</td><td>Text2</td><td>Text3</td><td> </td>
</tr><tr>
<td>Text4</td><td colspan=4>Text5 Text6 Text7 Text8</td>
</tr>
</table>
In this case, you'd add enough non-breaking spaces ( ) to stretch out the right hand cell.
Hope that helps...
精彩评论