CSS display: mesa primera columna demasiado ancho
-
01-10-2019 - |
Pregunta
Tengo una configuración de tabla CSS como esto:
<div class='table'>
<div>
<span>name</span>
<span>details</span>
</div>
</div>
El css para la tabla es:
.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;
}
Tal como está las dos columnas están divididos de manera uniforme entre el espacio ocupado por la anchura de la tabla. Estoy tratando de conseguir la primera columna sólo para ser tan amplia como sea necesario por el texto que lo ocupa de las células
La tabla es un ancho desconocido, al igual que las columnas / celdas.
Solución
Just dan una cualquier pequeña anchura como 1px
. celdas de la tabla siempre se expande al tamaño más pequeño posible para adaptarse a su contenido.
Otros consejos
Trate -> table-layout: fixed
Se podría utilizar el selector de primer hijo para encontrar la primera div dentro de la tabla y darle un aparte con.
.table div:first-child
{
width:30%;
}
No sé que usted puede conseguir que sea el tamaño del texto si que difiere en fila, pero se puede intentar establecer un ancho = "auto" o un ancho de porcentaje para las columnas.
Debe cambiar su nombre de clase "mesa" a algún otro. "Mesa" sugieren que es la clase de alguna tabla de div.
trate de seguir
<div class='table'>
<div>
<span style="width:30%">name</span>
<span>details</span>
</div>
</div>