fluid layout - tutorial - css display: tabla que no muestra el borde
css layout examples (3)
Es necesario agregar border-collapse: collapse; a la clase .table para que funcione así:
<html>
<style type="text/css">
.table { display: table; border-collapse: collapse;}
.tablerow { display: table-row; border: 1px solid #000;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>
<html>
<style type="text/css">
.table { display: table;}
.tablerow { display: table-row; border:1px solid black;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>
Según mi entendimiento, se debe dibujar un borde negro en cada una de las filas que he especificado a través de la clase de tablerow. Pero el borde no aparece.
Y quería cambiar la altura de una fila. Si lo especifico con ''px'' - funciona. Pero, si lo doy con un% - no funciona. Intenté lo siguiente
.tablerow {
display: table-row;
border:1px solid black;
position: relative; //not affecting anything and the border disappears!!
//position: absolute; // if this is set,the rows overlaps and the border works
height: 40%; // works only if specified in px and not in %
}
Algo va mal en alguna parte, pero no puedo entender dónde. ¡Por favor ayuda!
Es necesario agregar el border a la clase de tablecell .
Además, para que se vea bien, deberá agregar border-collapse:collapse; a la clase de la mesa.
Ejemplo: http://jsfiddle.net/jasongennaro/4bvc2/
EDITAR
Según el comentario
Estoy aplicando un borde a un div, ¿debería aparecer correctamente?
Sí, pero una vez que lo configura para mostrarse como una table así es como actuará ... como una table , por lo que deberá seguir las reglas de css para mostrar las tablas.
Si necesita establecer el border solo en las filas, use border-top y border-bottom y luego establezca clases específicas para las celdas más a la izquierda y más a la derecha.
Las filas de la tabla no pueden tener un atributo de borde. Puede obtener un borde alrededor de cada fila asignando a todas las celdas un borde superior e inferior, y agregando una clase para las celdas más a la izquierda y más a la derecha con un borde izquierdo y derecho respectivamente.
Edición: me olvidé border-collapse:collapse . Eso también funcionará.