12

次のようなcssテーブルのセットアップがあります。

<div class='table'>
 <div>
  <span>name</span>
  <span>details</span>
 </div>
</div>

テーブルの CSS は次のとおりです。

.table{
 display:table;
 width:100%;
}
.table div{
 text-align:right;
 display:table-row;
 border-collapse: separate;
 border-spacing: 0px;
}
.table div span:first-child {
 text-align:right;
}
.table div span {
 vertical-align:top;
 text-align:left;
 display:table-cell;
 padding:2px 10px;
}

現状では、2 つの列は、表の幅が占めるスペースの間で均等に分割されます。最初の列を、セルを占めるテキストが必要とする幅だけにしようとしています

列/セルと同様に、テーブルの幅は不明です。

4

5 に答える 5

19

試してみてください - >table-layout: fixed

于 2010-07-20T09:37:19.240 に答える
11

のような小さな幅を与えるだけ1pxです。表のセルは常に、コンテンツに合わせて可能な限り小さいサイズに拡張されます。

于 2010-04-27T10:01:31.013 に答える
2

最初の子セレクターを使用して、テーブル内の最初の div を見つけ、それを別のものにすることができます。

.table div:first-child
{
    width:30%;
}
于 2010-04-27T10:04:44.410 に答える
1

行によって異なる場合、テキストのサイズを取得できるかどうかはわかりませんが、列の width ="auto" またはパーセンテージ幅を設定してみてください。

于 2010-04-27T10:08:51.933 に答える
-1

クラス名「テーブル」を別の名前に変更する必要があります。「テーブル」は、div よりも何らかのテーブルのクラスであることを示唆しています。

フォローしてみてください

<div class='table'>
 <div>
  <span style="width:30%">name</span>
  <span>details</span>
 </div>
</div>
于 2010-04-27T10:04:33.710 に答える