CSS display: table erste Spalt zu breit

Question

Ich habe eine CSS-Tabelle Setup wie folgt aus:

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

Die CSS für die Tabelle ist:

.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;
}

Wie es steht die beiden Spalten aufgeteilt sind gleichmäßig zwischen dem Raum, der durch die Breite der Tabelle belegt. Ich versuche, die erste Säule zu erhalten, nur so breit zu sein, wie durch den Text benötigt wird Zellen

besetzen

Die Tabelle ist eine unbekannte Breite, wie die Spalten / Zellen.

Answer 1

geben Sie es doch einfach eine beliebige kleine Breite wie 1px. Tabellenzellen erweitert sich immer auf die kleinstmögliche Größe sein Inhalt zu passen.

Answer 2

Versuchen Sie -> table-layout: fixed

Answer 3

Sie könnten den ersten Kind-Selektor das erste div in der Tabelle zu finden und gibt ihm eine seperate mit.

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

Answer 4

Ich weiß nicht, dass Sie es die Größe des Textes durch Zeile, wenn dadurch unterscheidet, dass sein zu bekommen, aber Sie können versuchen, eine width = „auto“ oder eine prozentuale Breite für die Spalten festlegen.

Answer 5

Sie sollten Ihre Klassennamen „Tabelle“ zu einem anderen wechseln. „Tisch“ legen nahe, dass es Klasse einiger Tabelle als div ist.

versuchen folgende

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