css: mesa primera columna demasiado ancho

Tengo una configuración de tabla CSS como esto:css: mesa primera columna demasiado ancho

<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 y como está las dos columnas se dividen en partes iguales entre el espacio ocupado por el ancho de la mesa. Intento que la primera columna tenga el ancho que necesita el texto que ocupa sus celdas

La tabla tiene un ancho desconocido, al igual que las columnas/celdas.

Fuente

2010-04-27 Mestore

'frontera-collapse' y' frontera-spacing' sólo se aplican a las tablas de filas de la tabla. Debes moverlos a la regla '.table'. NB: ¿Alguna razón especial por la que no estás usando una mesa? – RoToRa

No se usa una tabla html porque el código existe en todo el sitio y se genera a través de algunos ajax. Simplemente lo mantuve simple porque el ajax y php no están relacionados con el problema. – Mestore

Pero seguramente generar divisiones y divs anidados no es diferente de generar una tabla con trs y tds? ¿Cómo es eso (y tratar con estos problemas de tablas CSS) más fácil que solo generar una tabla a través de AJAX? – Simon

Solo déle un ancho pequeño como 1px. Las celdas de tabla siempre se expanden al tamaño más pequeño posible para ajustarse a su contenido.

Fuente

2010-04-27 10:01:31 RoToRa

Esto ya se ha intentado, hace que el ancho sea tan ancho como la palabra más larga. Si la celda tiene 3-5 palabras, el navegador se ajustará tanto como sea posible para mantener la celda lo más estrecha posible. – Mestore

intente agregar whitespace = "nowrap" –

Luego, también debe agregar 'white-space: nowrap' para dejar de envolver. – RoToRa

-1

debe cambiar su nombre de clase "tabla" a alguna otra. "tabla" sugiere que es clase de alguna tabla que div.

intento siguiente

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

Fuente

2010-04-27 10:04:33 Salil

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

Fuente

2010-04-27 10:04:44 Rob

No sé que usted puede conseguir que sea el tamaño del texto si que se diferencia por fila, pero se puede intentar establecer un ancho = "auto" o un ancho de porcentaje para las columnas.

Fuente

2010-04-27 10:08:51

Try ->table-layout: fixed

Fuente

2010-07-20 09:37:19 Fortisimo

Tu leyenda. Esto solucionó el problema que estaba teniendo con las células que salían de los contenedores. –

¡Un salvavidas! ¡Gracias! –

¿Dónde estás poniendo esto? – evolutionxbox

css: mesa primera columna demasiado ancho

Respuesta

Cuestiones relacionadas