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>

ラベル テキストを非折り返しにしたい。そのため、テーブルの左半分は、1 行に収まる最長のラベル テキストと同じ幅しかありません。右側は残りのスペースを埋め、そのテキストは行を折り返します。

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 のような td の正確な幅を取得したい場合は、次の css を使用できます。

min-width:500px

また

width:500px

左側に設定してテストします..これらのCSSはすべてIEで正常に動作します;）

于 2013-06-23T23:39:14.707 に答える