CSS display: tabella non visualizza il confine

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

Secondo la mia comprensione, un bordo nero dovrebbe essere disegnato su ciascuna delle righe che ho specificato tramite tablerow class.But confine doesnt venire.CSS display: tabella non visualizza il confine

e volevo cambiare l'altezza di un row.If a specificare con 'px' - è work.But, se mi danno con una% - wont work.I provato quanto segue

.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 % 
}

Qualcosa sta andando storto da qualche parte, ma non sono in grado di capire dove. Per favore aiuto!

fonte

2011-08-24 Vivek Chandra

hai provato a specificare bordo per gli elementi di cella? o non è quello che vuoi? –

119

è necessario aggiungere border-collapse: collapse; alla classe .table per farlo funzionare in questo modo:

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

fonte

2011-08-24 12:18:15 dSquared

Grazie, questo mi ha aiutato. –

Grazie buona soluzione –

Grazie! La tua soluzione ha aiutato! – yathrakaaran

È necessario aggiungere border alla classe tablecell.

Inoltre, per renderlo bello, è necessario aggiungere border-collapse:collapse; alla classe della tabella.

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

EDIT

Come per il commento

sto applicando un bordo a un div, si dovrebbe ottenere visualizzata a destra?

Sì, ma una volta che lo si imposta per visualizzare come un table è così che agirà come un ... table, quindi sarà quindi necessario seguire le regole CSS per la visualizzazione delle tabelle.

Se è necessario impostare border solo sulle righe, utilizzare border-top e border-bottom e quindi impostare classi specifiche per le celle più a sinistra e più a destra.

fonte

2011-08-24 12:06:48

perchè non posso dare il confine per una fila ?? –

sto applicando un bordo ad un div, dovrebbe essere visualizzato giusto? –

Vedere la mia modifica sopra @Vivek Chandra –

Le righe di tabella non possono avere un attributo di confine. È possibile ottenere un bordo attorno a ciascuna riga assegnando a tutte le celle un bordo superiore e inferiore e aggiungendo una classe per le celle più a sinistra e più a destra con un bordo sinistro e uno destro rispettivamente.

JS fiddle link

edit: ho dimenticato di border-collapse:collapse. Funzionerà anche questo.

fonte

2011-08-24 12:17:47

CSS display: tabella non visualizza il confine

risposta

Problemi correlati