1

動的なままにしたいテーブルがあります。つまり、列幅をピクセルまたはパーセンテージで割り当てたくないということです。

ほとんどの場合、表は妥当な列幅を適切に割り当てています。問題は、1 つまたは複数の TD に異常に広いデータをロードする必要がある場合があることです。その結果、非常に幅の広い TD コンテンツを処理するために、テーブル レイアウト全体がシフトされます。

1 つの TD またはそのコンテンツをマークアップして、列幅に影響を与えずに既存のレイアウトにちょうど収まるようにしたいと考えています。私はTDの高さに影響を与えたいと思っています。

基本的に、TDが列幅を調整してコンテンツに対応しようとすることなく、コンテンツを既存のTDにラップするように強制したいと考えています。

<table>
       <tr><td>Field Label #1</td><td><input name='@1'></td></tr>
       <tr><td>Field Label #2</td><td><input name='@2'></td></tr>
       <tr><td>Field Label #3</td><td><input name='@3'></td></tr>
       <tr><td>Field Label #4</td><td><input name='@4'></td></tr>
       <tr><td>&nbsp;</td><td class='ignoreContentWidth'><div>Super long message or notice to user that I want to wrap naturally but I don't want it to have any effect on the table layout..</div></td></tr>
       <tr><td>Field Label #5</td><td><input name='@5'></td></tr>
</table>​

私は次の CSS を試してみましたが、これで途中まで進みましたが、TD はコンテンツの高さも無視します。

.ignoreContentWidth
{
    /* display: none; */
    position:relative;
}

.ignoreContentWidth div
{
    position:absolute;
    top:0;
}

問題を示すフィドル。 CSSをいじる

フィドルの CSS を削除して、不要なものを確認します。

4

2 に答える 2

1

使用する

.ignoreContentWidth
{
    width:1px;
}

トリックを行うようです。

少しハックですが、そのセルの幅をできるだけ小さくすると、セルが空の場合の幅になります。テキストが折り返され、必要に応じてセルの高さが強制的に変更されます。

于 2012-08-16T16:11:38.523 に答える
0

それが必要な場合は、少なくともテーブルのどこかに幅が必要です。

CSS widthまたはmax-width. _ また、それに応じて高さを調整する場合は、絶対配置を削除します。これを試して：

.ignoreContentWidth
{
    /* display: none; */
    position:relative;

}

.ignoreContentWidth div
{
max-width: 300px;
}

幸運を！

編集:ここに JS Fiddle があります: http://jsfiddle.net/MCHdb/

于 2012-08-16T16:08:50.277 に答える