Question

请看我的小提琴：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>

我希望Label文本是非包装的。因此，表格的左半部分只会与一行中最长的标签文本一样宽。然后右侧将填充剩余空间，其文本将换行。

需要在IE和Chrome中使用。

Answer 1

试试这个：

<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

Answer 2

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

white-space:nowrap

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

min-width:500px

或

width:500px

将它设置在你的左侧并进行测试..所有这些css在IE中工作正常;）

如何修复工作台宽度的左侧并使右侧填充剩余宽度

2 个答案: