Html 如何防止单元格从其下一行中较宽的单元格展开

我正在我的页面上使用

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>

…而不是：

Text1  Text2         Text3
Text4  Text5  Text6  Text7  Text8

---

我不想指定宽度。

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

td{display:inline;}

演示：

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

td{float: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>

Text1Text2Text3
Text4Text5 Text6 Text7 Text8

在本例中，您需要添加足够多的不间断空格（）以延伸右侧单元格

---

希望对您有所帮助……

您是否尝试将表格用于布局？不，这不是用于布局。我的标签在一个单元格中，文本框在下一个单元格中。如果文本是左对齐的…则“Text3”应显示在单元格的最左侧区域。我不能完全理解你想要实现的目标。尝试向表格标记添加边框。@John:Text2和Text3单元格的宽度被分割，以占用其下较宽单元格的空间。文本是左对齐的，但这只是单元格的排列。第二个选项的作用是什么，它与第一个选项有何不同？第二个选项与第一个选项类似，但向左浮动项目会导致所有tds堆叠。您需要添加边距等来隔开它们。以内联方式显示它们更有意义。我现在陷入了困境，我正在使用Yahoo API，当我应用您的样式时，表就乱七八糟了：（所以我不知道该怎么办。在JS FIDLE中它看起来不错。尝试使用display:inline block；来代替。

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