1

ユーザーが列にデータを入力するテーブルがあります。ユーザーがデータを入力するたびに、新しい列が作成されます。しばらくすると、それらには大量の列があり、ラップする必要があります。

列内でテキストを折り返す方法は知っていますが、最初の列の下に列全体を折り返す必要があります。

4

4 に答える 4

2

これにはテーブルを使用しないでください。「float：left」CSSスタイルのdivを使用する必要があります。

これが実際の例です：http：//jsfiddle.net/3MEJ5/

于 2012-06-05T17:32:57.983 に答える
1

それは実際には単純ではありません。テーブル/行/列の構造は非常に堅固です。説明する内容を実現するには、各セルを巨大な外側のセルに単一セルのテーブルとして作成する必要があります。その後、彼らはラップします。しかし、その後、それらはうまく整列しない可能性があります。

于 2012-06-05T17:27:13.397 に答える
1

テーブル列を使用する代わりに<div class="datainput">、次のCSSを使用して、各入力データをそれ自体でテーブルにし、内にラップしてみてください。

.datainput {display: inline-block; vertical-align: top;}

ここで、新しい列を追加する代わりに、コンテナーを複製します。これにより、既存のものの隣に配置され、必要に応じてラップされます。

ラップに失敗した場合は、次のすべてのコンテナを含む要素にこのCSSを適用します。

word-break: break-all;
于 2012-06-05T17:29:24.440 に答える
-1

これに対する良い解決策は、CSS3列を使用することです。

コンテナにCSSプロパティを設定すると、子が上下に流れます。

オプションがあります：

div {
  /* Make columns with a min width of 100px, create multiple columns as space permits */
  column-width: 100px;
  column-count: 3; /* Divide the text in a <div> element into three columns */
  column-gap: 40px;  /* Specify a 40 pixels gap between the columns */
  /* Specify the width, style, and color of the rule between columns */
  column-rule: 4px double #ff00ff;
}

詳細については、https ：//www.w3schools.com/cssref/css3_pr_columns.aspを参照してください。

ブラウザのサポートについては、https ：//caniuse.com/#search=css3%20columnsを参照してください。

于 2019-04-01T17:18:23.720 に答える