1

请看我的小提琴：http: //jsfiddle.net/UR3HL/10/

<table cellspacing="3" border=1>
<tr>
    <td colspan="2" width="100%">Heading</td>
</tr>
<tr>
    <td width="500" valign="top" align="center">Label One</td>
    <td width="100%" valign="top">Stuff about Label one. jkhsdf dhjsf hsdjkhfjk hjsd fhjskdfh jkdsh fjksdh fjdsh fjskdfh sdjkfh jsd fhjk
        <br>Reams and reams of text
        <br>etc.</td>
</tr>
            <tr>
    <td width="300" valign="top" align="center">A Longer Label Name</td>
    <td width="100%" valign="top">Stuff about Label two.
        <br>Reams and reams of text
        <br>etc.</td>
</tr>
</table>

我希望标签文本不换行。因此，表格的左半部分将仅与最长的标签文本一样宽，并且都在一行上。然后右侧将填充剩余空间，其文本将换行。

需要在 IE 和 Chrome 中工作。

4

2 回答 2

2

试试这个 ：

<table cellspacing="3" border=1>
    <tr>
        <td colspan="2" width="100%">Heading</td>
    </tr>
    <tr>
        <td valign="top" align="center" style="white-space:nowrap;">Label One</td>
        <td valign="top">Stuff about Label one. jkhsdf dhjsf hsdjkhfjk hjsd fhjskdfh jkdsh fjksdh fjdsh fjskdfh sdjkfh jsd fhjk
            <br>Reams and reams of text
            <br>etc.</td>
    </tr>
                <tr>
        <td valign="top" align="center" style="white-space:nowrap;">A Longer Label Name</td>
        <td valign="top">Stuff about Label two.
            <br>Reams and reams of text
            <br>etc.</td>
    </tr>
</table>

基本上去掉你的宽度样式，添加 nowrap 的样式。适用于所有浏览器，如下所示：http: //www.w3schools.com/cssref/pr_text_white-space.asp

于 2013-06-23T23:37:46.423 回答
1

如果你想阻止换行，只需使用 css：

white-space:nowrap

如果您想获得精确的宽度，例如 500px，您可以使用这些 css：

min-width:500px

或者

width:500px

将其设置在您的左侧并对其进行测试..所有这些 css 在 IE 中都可以正常工作；）

于 2013-06-23T23:39:14.707 回答