4

固定の高さのない複数の CSS 3 列にまたがる、多数のテキストと多数の表 (野球のリーダーボード) を含む本の抜粋をレイアウトしています。特にこれは、ゴールドグラブ受賞者の長くて狭いリストです. しかし、野球のデータをテーブルにフォーマットすると、それ自体が列に分割されないため、1 つの長いテーブルが得られます。

つまり、テキストの多い「ページ」で、私はこのようなことをしてから、抜粋から 500 語を貼り付けましたが、うまくいきました—</p> 

-webkit-column-width: 205px;
-webkit-column-gap: 20px;

テーブルでは、次のように動作させたいと思います:

-webkit-column-count: 2;
-webkit-column-gap: 20px;

表形式のデータをこれらの列とうまく連携させるにはどうすればよいですか? DIV からテーブルのようなものを作成するための最良のオプションはありますか?

4

1 に答える 1

0

基本的に、要素からテーブル表示を削除し、各行をdisplay:block;「テーブル」の各セルとdisplay:inline-block;目的の幅を持つものに変える必要があります。理論的には、現在のテーブルの CSS を使用してこれを行うことができるため、適切に劣化するか、または<div>s と<span>s などを使用できます。いずれにせよ、テーブルを現在の表示モードから、各行が独自のブロック要素になるように分割する必要があります。

例：

table { display:block; }
tr { display:block; }
td { display:inline-block; }
    td.short { width:100px; }
    td. [etc...]
于 2012-05-03T21:33:37.620 に答える