fila - tamaño de tabla con css
Visualización CSS: la fila de la tabla no se expande cuando el ancho está establecido en 100% (5)
Estoy teniendo un pequeño problema. Estoy usando FireFox 3.6 y tengo la siguiente estructura DOM:
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
Y el siguiente CSS:
.view-row {
width:100%;
display:table-row;
}
.view-name {
display: table-cell;
float:right;
}
.view-type {
display: table-cell;
}
Si me quito la display:table-row aparecerá correctamente, con la view-row la view-row mostrando un ancho del 100%. Si lo devuelvo, se encoge. Lo he puesto en JS Bin:
¿Que esta pasando?
Puede anidar tabla-celda directamente dentro de la tabla. Tendrás una mesa. Comenzar con la tabla de la fila no funciona. Pruébalo con este HTML:
<html>
<head>
<style type="text/css">
.table {
display: table;
width: 100%;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
</div>
<div class="tr">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
<div class="table">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
</body>
</html>
Si está usando display:table-row , etc., necesita el marcado adecuado, que incluye una tabla que contiene. Sin él, su pregunta original básicamente proporciona el marcado incorrecto equivalente de:
<tr style="width:100%">
<td>Type</td>
<td style="float:right">Name</td>
</tr>
¿Dónde está la tabla de arriba? No se puede simplemente tener una fila de la nada (tr debe estar contenida en table , thead , tbody , etc.)
En su lugar, agregue un elemento externo con display:table , ponga el ancho del 100% en el elemento contenedor. Las dos celdas internas irán automáticamente a 50/50 y alineará el texto en la segunda celda. Olvídate de los floats con elementos de la mesa. Causará tantos dolores de cabeza.
margen:
<div class="view-table">
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
</div>
CSS:
.view-table
{
display:table;
width:100%;
}
.view-row,
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.view-name
{
text-align:right;
}
Tenga en cuenta que, de acuerdo con la especificación CSS3, NO tiene que envolver su diseño en un elemento de estilo de tabla. El navegador deducirá la existencia de elementos que contienen si no existen.
dar en .view-type float:left; clase float:left; o eliminar el float:right; de .view-name
edit: ajusta tu div <div class="view-row"> con otro div por ejemplo <div class="table">
y establece el siguiente css:
.table {
display:table;
width:100%;}
Debe usar la estructura de la tabla para obtener resultados correctos.
Respuesta probada:
En .view-row css, cambie:
display:table-row;
a:
display:table
y deshacerse de "flotar" . Todo funcionará como se espera.
Como se ha sugerido en los comentarios, no hay necesidad de una tabla de embalaje. CSS permite omitir los niveles de la estructura de árbol (en este caso, las filas) que están implícitos. La razón por la que su código no funciona es que el "ancho" solo se puede interpretar en el nivel de la tabla, no en el nivel de la tabla de la fila. Cuando tiene una "tabla" y luego una "celda de tabla" directamente debajo, se interpretan implícitamente como sentados en una fila.
Ejemplo de trabajo:
<div class="view">
<div>Type</div>
<div>Name</div>
</div>
con css:
.view {
width:100%;
display:table;
}
.view > div {
width:50%;
display: table-cell;
}