css - contenido - div que ocupe toda la pantalla bootstrap
Usar calc() con tablas (2)
Calc es la función general.
-webkit-calc es para webkit.
Añádalos según el navegador que esté utilizando.
De todos modos, su función -calc- será ignorada. tener 3 td que será 40% del ancho restante? Eso es 120% en total. Esto es una mesa. El ancho del padre siempre tendrá prioridad.
Sin embargo, si tiene los TD''s en 5%, el ancho total será menor que el de la tabla, por lo tanto, también se ignorará.
En pocas palabras: no use calc con la tabla.
Estoy tratando de obtener una tabla con td s de ancho fijo y td s de ancho variable.
Estoy usando la función CSS calc() , pero de alguna manera parece que no puedo usar % en las tablas.
Entonces eso es lo que tengo hasta ahora:
<table border="0" style="width:100%;border-collapse:collapse;">
<tr style="width:100%">
<td style="width:30px;">1</td> <!--Fixed width-->
<td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space-->
<td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space-->
<td style="width: calc( (100% - 230px) / 100 * 20);">Album</td> <!--Width should be 20% of the remaining space-->
<td style="width:80px;">Year</td><!--Fixed width-->
<td style="width:180px;">YouTube</td><!--Fixed width-->
</tr>
</table>
Cómo lo veo, debería funcionar, pero no es así.
¿Alguien sabe cómo resolver esto? ¿O tal vez tiene alguna otra sugerencia de cómo podría alcanzar mi objetivo?
Las tablas tienen reglas difíciles sobre la distribución del espacio de las columnas porque distribuyen el espacio de manera predeterminada según el contenido de las celdas. Calc (atm) simplemente no funcionará con eso.
Sin embargo, lo que puede hacer es establecer el atributo de table-layout de table para la table para forzar los elementos td secundarios a obtener el ancho exacto que declaró. Para que esto funcione también necesita un width ( 100% funciona) en la mesa.
table{
table-layout:fixed; /* this keeps your columns with at the defined width */
width: 100%; /* a width must be specified */
display: table; /* required for table-layout to be used
(since this is the default value it is normally not necessary;
just included for completeness) */
}
y luego use porcentajes simples en las columnas restantes.
td.title, td.interpret{
width:40%;
}
td.album{
width:20%;
}
Después de usar el espacio para las columnas de ancho fijo, el espacio restante se distribuye entre las columnas con ancho relativo.
Para que esto funcione, necesita la pantalla de tipo de display: table predeterminada display: table (en lugar de decir, display: block ). Sin embargo, esto significa que ya no puede tener una height (incluyendo min-height y max-height ) para la tabla.