CSSディスプレイ：テーブルの最初の列が広すぎます

Question

このような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つの列は、テーブルの幅で占める空間の間に均等に分割されます。私は最初の列を、セルを占有するテキストが必要とするのと同じくらい広いようにしようとしています

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

Answer 1

のような小さな幅を与えるだけです 1px. 。テーブルセルは常に、コンテンツに合うように可能な限り最小サイズに拡張します。

Answer 2

try-> table-layout: fixed

Answer 3

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

.table div:first-child
{
    width:30%;
}

Answer 4

それが行ごとに異なる場合、テキストのサイズにすることができることはわかりませんが、列の幅= "auto"または幅の割合を設定することができます。

Answer 5

クラス名「テーブル」を他の人に変更する必要があります。 「テーブル」は、それがdivよりもいくつかのテーブルのクラスであることを示唆しています。

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

<div class='table'>
 <div>
  <span style="width:30%">name</span>
  <span>details</span>
 </div>
</div>