CSS display: mesa primera columna demasiado ancho

Question

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.

Answer 1

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.

Answer 2

Trate -> table-layout: fixed

Answer 3

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

Answer 4

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.

Answer 5

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>