CSS display: table prima colonna troppo larga

Question

Ho una configurazione di tabella CSS in questo modo:

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

Il CSS per la tabella è:

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

Così com'è le due colonne sono divisi equamente tra lo spazio occupato dalla larghezza della tabella. Sto cercando di ottenere la prima colonna solo per essere il più ampio è necessario in quanto dal testo occupandola di cellule

Il tavolo è una larghezza sconosciuta, come lo sono le colonne / cellule.

Answer 1

Basta fare un qualsiasi piccola larghezza come 1px. Le celle di tabella si espande sempre di più piccola dimensione possibile per adattare il suo contenuto.

Answer 2

Prova -> table-layout: fixed

Answer 3

Si potrebbe utilizzare il selettore del primo figlio a trovare la prima div all'interno della tabella e dargli un separato con.

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

Answer 4

Non so che si può ottenere che sia la dimensione del testo se che si differenzia per riga, ma si può provare a impostare una width = "Auto" o una larghezza percentuale per le colonne.

Answer 5

si dovrebbe cambiare il nome della classe "tavolo" a qualche altro. "Tavolo" suggeriscono che si tratta di classe di una certa tabella di div.

prova a seguire

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