开发者

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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.

How to prevent a cell from expanding from a wider cell in row beneath it

Hope that helps...

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜