css display: tabla que no muestra el borde

<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>

De acuerdo con lo que yo entiendo, debe dibujarse un borde negro en cada una de las filas que he especificado a través de la clase tablerow.Pero el borde no aparece.css display: tabla que no muestra el borde

y quería cambiar la altura de una row.If especifico con 'px' - que work.But, si me lo da con un% - suele work.I trataron los siguientes

.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 anda mal en alguna parte, pero no puedo entender dónde. ¡Por favor ayuda!

Fuente

2011-08-24 Vivek Chandra

han intentado especificar la frontera de los elementos de la célula? o no es lo que quieres? –

119

es necesario agregar border-collapse: collapse; a la clase .table para que funcione de esta manera:

<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>

Fuente

2011-08-24 12:18:15 dSquared

Gracias, eso ayudó. –

Gracias buena solución –

¡Gracias! ¡Tu solución ayudó! – yathrakaaran

Necesita agregar el border a la clase tablecell.

Además, para que se vea bien, deberá agregar border-collapse:collapse; a la clase de tabla.

Ejemplo: http://jsfiddle.net/jasongennaro/4bvc2/

EDITAR

Según el comentario

estoy aplicando un borde a un div, debe ser visualizado, ¿verdad?

Sí, pero una vez que se establece que se muestre como un table que es cómo se va a actuar ... como table, por lo que a continuación, tendrá que seguir las reglas CSS para la presentación de tablas.

Si necesita ajustar la border sólo en las filas, utilice border-top y border-bottom a continuación, establecer clases específicas para las células extremos izquierdo y derecho.

Fuente

2011-08-24 12:06:48

¿por qué no puedo dar el borde de una fila? –

estoy aplicando un borde a un div, debería mostrarse ¿correcto? –

Ver mi edición anterior @Vivek Chandra –

Las filas de la tabla no pueden tener un atributo de borde. Puede obtener un borde alrededor de cada fila dando a todas las celdas un borde superior e inferior, y agregando una clase para las celdas más a la izquierda y a la derecha con un borde izquierdo y derecho, respectivamente.

JS fiddle link

editar: Me olvidó de border-collapse:collapse. Eso también funcionará

Fuente

2011-08-24 12:17:47

css display: tabla que no muestra el borde

Respuesta

Cuestiones relacionadas