0

水平方向に配置された 2 セルのテーブルがあります。テーブルの幅は約 500px に設定されています。1 番目と 2 番目のセルには、ページが読み込まれるたびにさまざまな長さの文字列変数が入力されます。私が取得しようとしているのは、左揃えのセル 1 に空白がなく、セル 2 とテーブルの端の間に空白がないことです。次のようになります。

[[textfromvariable1][textfromvariable2                                    ]]

編集：エリ：

現在は次のようになっています。

[[text1][text2      ]

そのため、セル 2 はテーブルの幅をカバーしていません。

4

2 に答える 2

2

セルに幅を設定しても、セルの内容に合わせて拡大されるという事実を利用して、これを実現しました。

編集: HTML は、テーブル セルに指定した幅をテーブルに与えようとします。ただし、表のセルは、コンテンツに合わせてその幅を拡張します。したがって、1px から開始することで、そのテーブル セルに少量のスペースのみを割り当てるようにテーブルに指示します。拡大すると、そのセルの幅に対応するために、他のセルから最小限の量を取得しようとします。これにより、きつくラップされた最小幅セルが残り、残りの幅は残りのセル (この例では、他の 1 つのセル) によって消費されます。

CSS:

.minwidth { width: 1px; }
.nowrap { white-space: nowrap; }

HTML:

<table>
<tr>
<td class="minwidth nowrap">This is my first string</td>
<td>This is the rest</td>
</tr>
</table>

「variable1 text」は最初のセルにラップされるべきではないと仮定しました。それ以外の場合、「variable1」をランダムに（ただし単語境界で）ラップして幅を狭くすることができることを考えると、「variable2」を塗りつぶしたいと言うのは少し恣意的です。

編集: ここにデモンストレーションがありますhttp://jsfiddle.net/mZCg8/

于 2013-06-01T13:34:14.653 に答える
0

すべての td の幅を 100% に設定し、最初の td の幅を auto に設定し、空白プロパティを nowrap に設定してみてください。

<html>
    <head>
        <style type="text/css">
            table{
                width:500px;
                border-collapse:collapse;
                border:solid 1px #ddd;
            }
            table td{
                width:100%;
                border:solid 1px #ddd;
            }
            table td:first-of-type{
                width:auto;
                white-space:nowrap;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>This is my first string</td>
                    <td>This is the rest</td>
                </tr>
                <tr>
                    <td>Second Line : This is my first string</td>
                    <td>This is the rest</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
于 2013-06-01T14:00:23.300 に答える