如何防止单元格从其下方的较宽单元格中扩展

Question

我在网页上使用Yahoo YUI样式。

我有以下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>

第二行的第二列比包含Text2和Text3的2列宽。现在因为如果这个单元格包含Text3不在包含Text2的单元格旁边。我需要它像这样，但它似乎划分了Text2和Text3之间的空间（因为它下面的列较长。

我认为通过使它成为2的colspan可以防止这种情况，但它不起作用。我只希望包含Text3的单元格占用剩下的空间。所以我要找的是：

Text1  Text2  Text3
Text4  Text5  Text6  Text7  Text8

......而不是：

Text1  Text2         Text3
Text4  Text5  Text6  Text7  Text8

我不想指定宽度。

Answer 1

实现此目的的一种方法是内联显示表格单元格：

td{display:inline;}

演示：http://jsfiddle.net/eGs6h/1/

或者，您可以将表格单元格向左浮动。

td{float:left;}

演示：http://jsfiddle.net/eGs6h/2/

我自己更喜欢内联方法。

Answer 2

你也可以使用<TD ALIGN="left">作为Text3 td。

更新：

好的......我明白了......基本上，桌子会自动调整内容的大小，所以你给出的html它会拉出右上角2个单元格（正如你所描述的那样）...不幸的是，没有调整它们你会被迫强迫他们表现得正确。可能有几种方法可以做到这一点，但有一种方法是将Text2和Text3放在当前只包含Text2的单元格中。另一种方法是添加另一个td单元......

<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>

在这种情况下，你需要添加足够的不间断空格（）来伸展右手单元格。

希望有帮助...