CSS display: table prima colonna troppo larga
-
01-10-2019 - |
Domanda
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.
Soluzione
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.
Altri suggerimenti
Prova -> table-layout: fixed
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%;
}
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.
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>