Colspan / Rowspan per gli elementi la cui visualizzazione è impostata su table-cell

109

Ho il codice seguente:

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

Abbastanza diretto. Come aggiungo un colspan (o l'equivalente di colspan) per gli elementi con display: table-cell?

html  css 
— Il fantasma di Madara
fonte
5
Non puoi usare solo un tavolo? Sarebbe molto più facile. Inoltre, se si tratta di dati tabulari, sarebbe anche più semantico.
— punkrockbuddyholly
@thirtydot probabilmente può, sarebbe solo un dolore e non necessario. I sistemi a griglia come 960 fondamentalmente ottengono questo, ma per un intero layout di pagina.
— punkrockbuddyholly
@ MrMisterMan: non sono sicuro di quello che stai dicendo. 960.gs non usa display: table-cell.
— trenta punti
@thirtydot scusa, ho dimenticato la domanda specifica che l'OP aveva posto. Hai ragione, non puoi aggiungere un colspan tramite CSS. Stavo facendo notare che puoi fare in modo che i div si comportino come righe e colonne e che include celle che si estendono su più colonne.
— punkrockbuddyholly
Usa una tabella simulata come fai per il tuo primo livello di organizzazione, che ti darà la possibilità di creare un piè di pagina appiccicoso, ad esempio. per la tua emulazione colspan, puoi creare una tabella nidificata nella tua cella unica, che avrà una singola riga e tutte le celle necessarie, oppure utilizzare un semplice div mobile.
— Bernard Dusablon

Risposte:

27

Dal momento che OP non regola esplicitamente che la soluzione deve essere puro CSS, sarò testardo e introdurrò la mia soluzione alternativa che ho capito oggi, soprattutto perché è molto più elegante che avere una tabella all'interno di una tabella.

L'esempio è uguale a <table> con due celle per riga e due righe, dove la cella nella seconda riga è una td con colspan="2".

L'ho provato con Iceweasel 20, Firefox 23 e IE 10.

div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}

div.row {
  display: table-row;
}

div.cell {
  display: table-cell;
  border: 1px solid red;
}

div.colspan,
div.colspan+div.cell {
  border: 0;
}

div.colspan>div {
  width: 1px;
}

div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}
<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>
Espandi lo snippet

Azione dal vivo (demo) qui .

EDIT: Ho messo a punto il codice per essere più adatto alla stampante, poiché lasciano i colori di sfondo fuori per impostazione predefinita. Ho anche creato rowspan-demo , ispirato alla risposta in ritardo qui.

— F-3000
fonte
Sto cercando una soluzione simile. Ma invece, ho 5 celle nella riga superiore. Nella riga inferiore, ho bisogno di 1 cella delle stesse dimensioni della riga superiore. Quindi una cella con colspan = 2 e un'altra cella con colspan = 2, per un totale di 5 celle anche nella riga inferiore. Ecco il problema jsfiddle basato sulla tua soluzione. qualche idea? jsfiddle.net/7wdza4ye/1
— Varun Verma
1
@ VarunVerma, devi aggiungere una cella vuota tra le celle 7 e 8. Aggiungendo solo <div class="cell"></div>lavori (almeno con Firefox). Con questo design, è necessario riempire con celle vuote. Ad esempio, se lo avessi in modo che la cella 7 fosse colspan = 3 e la cella 8 fosse normale, allora avresti bisogno di due celle vuote tra le celle 7 e 8. A meno che tu non abbia progettato qualcos'altro (margini? Singolo div personalizzato?) . Inoltre, la larghezza di 100px e 5 celle rende le cose complicate, perché le parole allungano le celle CSS, le impostazioni di overflow non sembrano fare la differenza. È inoltre necessario ricalcolare widthper div.colspan>div>div.
— F-3000
ha funzionato. Grazie. In effetti, ho aggiunto una cella vuota dopo la cella 8 perché il bordo inferiore non veniva visualizzato. Ecco l'ultima: jsfiddle.net/7wdza4ye/3 . Sapevo come ottenere il confine tra la cella 7 e 8. Qualche suggerimento? Grazie per l'aiuto.
— Varun Verma
1
@VarunVerma, con Chrome il bordo esterno era incompleto senza celle vuote dopo l'8, quindi è davvero necessario. Modo semplice per aggiungere il confine tra le celle 7 e 8 potrebbe essere questo: div.colspan{border-left:1px solid red}. Deve essere posizionato da qualche parte sotto la regola che imposta div.colspan senza bordi, altrimenti verrà annullato.
— F-3000
Grazie @ F-3000. È stato utile. Per il resto, ecco l'ultimo link basato sulla soluzione dell'F-3000: jsfiddle.net/7wdza4ye/4
— Varun Verma
16

Una soluzione più semplice che funziona per me in Chrome 30:

Colspan può essere emulato usando al display: tableposto di display: table-rowper le righe:

.table {
    display: block;
}
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
    display: block;
}

L'unico problema è che le celle delle righe impilate non si allineano verticalmente, poiché provengono da tabelle diverse.

— Philippe97
fonte
7

Se stai cercando un metodo CSS diretto per simulare un colspan, potresti usare display: table-caption.

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}
.colspan2 {
  /* What to do here? */
  display: table-caption;
}
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>
Espandi lo snippet

— stacigh
fonte
È incredibile che tu sia rock!
— Raj Kamal,
1
Utilizzando display: table-caption si estenderà su tutte le colonne e posizionerà la riga nella parte superiore della tabella, proprio come un elemento didascalia nella tabella html, quindi questo non funziona davvero. Solo se desideri estendere tutte le colonne sulla prima o sull'ultima riga.
— Michiel
6

Usa semplicemente un file table.

i tavoli sono disapprovati solo quando vengono utilizzati per scopi di layout.

Sembra che i dati tabulari (righe / colonne di dati). Pertanto consiglierei di utilizzare un file table.

Vedere la mia risposta a questa domanda per ulteriori informazioni:

creando la stessa cosa con div come tabelle

— conciso
fonte
11
Il fatto è che non è per dati tabulari, quindi non voglio usare una tabella :)
— Madara's Ghost
13
Non capisco perché CSS che tutto si comporti esattamente come una tabella è in qualche modo preferibile al semplice utilizzo di una tabella. Certo tr/ tdspam non è l'html più carino, ma è l'unica ragione? Tutti dicono che le tabelle non erano "pensate" per essere utilizzate per la formattazione, ma lo stesso HTML non era "inteso" per fare la metà delle cose che consideriamo accettabili per gli standard odierni, comprese le applicazioni web.
— Leggero
4
Quasi un anno dopo, ma - Leggero, condivido la tua irritazione con le persone che evitano i tavoli per nessun motivo se non "i tavoli sono fuori moda". Tuttavia, sto riscontrando alcuni progetti reattivi in ​​cui è utile che una tabella non sia una tabella, quindi può essere riorganizzata a larghezze inferiori. Imparare che non ho colspan per i div è un po 'deludente.
— girato il
4

Ecco un modo per estendere le colonne nei CSS che ho usato per la mia situazione.

https://jsfiddle.net/mb8npttu/

<div class='table'>
    <div class='row'>
        <div class='cell colspan'>
            spanning
        </div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>

    <div class='row'>
        <div class='cell'>1</div>
        <div class='cell'>2</div>
        <div class='cell'>3</div>
    </div>
</div>

<style>
    .table { display:table; }
    .row { display:table-row; }
    .cell { display:table-cell; }
    .colspan { max-width:1px; overflow:visible; }
</style>
— Tim
fonte
2
Ho dovuto aumentare .colspancon white-space: nowrap;per ottenere il risultato che volevo, ma ha funzionato alla grande.
— kshetline
2

C'è una soluzione per rendere il colspan la larghezza dell'intera tabella. Non è possibile utilizzare questa tecnica per eseguire il colspan di una parte della tabella.

Codice:

    *{
      box-sizing: border-box;
    }
    .table {
        display: table;
        position: relative;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid red;
        padding: 5px;
        text-align: center;
    }
    .colspan {
        position: absolute;
        left: 0;
        width: 100%;
    }
    .dummycell {
        border-color: transparent;
    }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell dummycell">&nbsp;</div>
        <div class="cell colspan">Cell</div>
    </div>
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
</div>
Espandi lo snippet

Spiegazione:

Usiamo la posizione assoluta sul colspan per renderlo l'intera larghezza della tabella. Il tavolo stesso necessita di posizione relativa. Facciamo uso di una finta cella per mantenere l'altezza delle righe, la posizione assoluta non segue il flusso del documento.

Ovviamente puoi anche usare flexbox e grid per affrontare questo problema in questi giorni.

— JT Houtenbos
fonte
1

CSS

.tablewrapper {
  position: relative;
}
.table {
  display: table;
  position: relative
}
.row {
  display: table-row;
}
.cell {
  border: 1px solid red;
  display: table-cell;
}
.cell.empty
{
  border: none;
  width: 100px;
}
.cell.rowspanned {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}
.cell.colspan {
  position: absolute;
  left: 0;
  right: 0;
}

HTML 

<div class="tablewrapper">
  <div class="table">
    <div class="row">
      <div class="cell rowspanned">
        Center
      </div>
      <div class="cell">
        Top right
      </div>
    </div>
    <div class="row">
      <div class="cell empty"></div>
      <div class="cell colspan">
        Bottom right
      </div>
    </div>
  </div>
</div>

Codice

— bderevyaga
fonte
1

Può essere fatto solo con CSS puro e centrando il testo sul colspan "falso".

Il trucco sta position:relativenell'impostare le righe su , quindi posizionare "div vuoti" nel punto in rowcui si desidera creare il colspan(devono avere heightper funzionare), impostare celldove si trova il contenuto display:gride, infine, applicare position:absoluteall'elemento all'interno della cella (e centrala come puoi centrare qualsiasi altro elemento assoluto).

 .table {
        display: table;
  }
  .row {
      display: table-row;
      position: relative;
  }
  .cell {
      display: table-cell;
      background-color: blue;
      color: white;
      height: 26px;
      padding: 0 8px;
  } 
  .colspan2 {
      display: grid;
  }
  .colspan2 p {
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    margin: 0;
  }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2"><p>Cell</p></div>
        <div class="cell"></div>
    </div>
</div>
Espandi lo snippet

— Joe82
fonte
0

Utilizzando le classi div e gli attributi CSS appropriati, è possibile imitare gli effetti desiderati di colspan e rowspan.

Ecco il CSS

.table {
    display:table;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    padding: 5px;
    vertical-align: middle;
}

Ecco l'HTML di esempio

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">X</div>
                    <div class="cell">Y</div>
                    <div class="cell">Z</div>
                </div>
                <div class="row">
                    <div class="cell">2</div>
                    <div class="cell">4</div>
                    <div class="cell">6</div>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        <div class="table">
                            <div class="row">
                                <div class="cell">A</div>
                            </div>
                            <div class="row">
                                <div class="cell">B</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        ROW SPAN
                    </div>    
                </div>
            </div>
        </div>
    </div>
</div>

Da quello che vedo sia nelle domande che nella maggior parte delle risposte, le persone sembrano dimenticare che in ogni dato div che funge da "cella di tabella" puoi inserire un altro div che si comporta come una tabella incorporata e avviare il processo al di sopra di.

*** Non è affascinante, ma funziona per coloro che cercano questo tipo di formattazione e vogliono evitare le TABELLE. Se è per LAYOUT DATI, le TABELLE funzionano ancora in HTML5.

Si spera che questo aiuti qualcuno.

— CCR
fonte
In primo luogo, HTML5 ha il pieno supporto per <table>: è solo che le persone dovrebbero evitare di usarlo per la formattazione visiva . Usarlo per visualizzare dati strutturati è dove dovrebbe essere usato , a meno che qualcos'altro (come <ul>, a titolo di esempio) si adatti meglio all'attività. In secondo luogo, amico, 4 tavoli. Porti una domanda interessante sul tavolo (rowspan), ma la tua risposta grida per essere usata <table>. Devo vedere come funziona la mia soluzione qui ...
— F-3000
Modificherei il mio commento precedente, ma il limite di tempo colpisce. Come con la mia risposta su colspan, il rowspan può essere realizzato con MOLTO meno problemi rispetto al tuo ... approccio originale. Guarda tu stesso .
— F-3000
Grazie per il tuo feedback. Non ho mai detto che HTML5 non supportava le tabelle. Molte persone stanno semplicemente cercando di evitarlo. A volte, quando si scrive un'app Web (al contrario di una semplice pagina di tipo pubblicitario), è necessario un layout più fisso per il posizionamento dei pulsanti e / o dei controlli.
— JRC
0

Puoi impostare la posizione del contenuto di colspan come "relativo" e la riga come "assoluta" in questo modo:

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}
— Justo
fonte
0

Al momento non puoi raggiungere questo obiettivo.

Per quanto ne so, questo sarebbe coperto dalle tabelle CSS , una specifica che sembra essere attualmente allo stato "lavori in corso".

— naXa
fonte
0

Puoi provare questa soluzione, dove puoi trovare come applicare colspan usando div https://codepen.io/pkachhia/pen/JyWMxY

HTML:

<div class="div_format">
            <div class="divTable">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Project Name</div>
                        <div class="divTableCell cell_value">: Testing Project</div>
                        <div class="divTableCell cell_lable">Project Type</div>
                        <div class="divTableCell cell_value">: Web application</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Version</div>
                        <div class="divTableCell cell_value">: 1.0.0</div>
                        <div class="divTableCell cell_lable">Start Time</div>
                        <div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Version</div>
                        <div class="divTableCell cell_value">: 2.0.0</div>
                        <div class="divTableCell cell_lable">End Time</div>
                        <div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Revision</div>
                        <div class="divTableCell cell_value">: 3</div>
                        <div class="divTableCell cell_lable">Overall Result</div>
                        <div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
                    </div>                          
                </div>
                <div class="divCaptionRow">
                    <div class="divCaptionlabel">Description</div>
                    <div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
                </div>
            </div>
        </div>

CSS:

body {
                font-family: arial
            }
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }
            .div_format {
                width: 100%;
                display: inline-block;
                position: relative
            }           
            .divTable {
                display: table;
                width: 100%;            
            }
            .divTableRow {
                display: table-row
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group
            }
            .divTableCell,
            .divTableHead {
                display: table-cell;
                padding: 10px
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group;
                font-weight: bold
            }
            .divTableFoot {
                background-color: #EEE;
                display: table-footer-group;
                font-weight: bold
            }
            .divTableBody {
                display: table-row-group
            }
            .divCaptionRow{
                display: table-caption;
                caption-side: bottom;
                width: 100%;
            }
            .divCaptionlabel{
                caption-side: bottom;
                display: inline-block;
                background: #ccc;
                padding: 10px;
                width: 15.6%;
                margin-left: 10px;
                color: #727272;
            }
            .divCaptionValue{
                float: right;
                width: 83%;
                padding: 10px 1px;
                border-bottom: 1px solid #dddddd;
                border-right: 10px solid #fff;
                color: #5f5f5f;
                text-align: left;
            }

            .cell_lable {
                background: #d0d0d0;
                border-bottom: 1px solid #ffffff;
                border-left: 10px solid #ffffff;
                border-right: 10px solid #fff;
                width: 15%;
                color: #727272;
            }
            .cell_value {
                border-bottom: 1px solid #dddddd;
                width: 30%;
                border-right: 10px solid #fff;   
                color: #5f5f5f;
            }
— pkachhia
fonte
-1

Anche se questa è una vecchia domanda, vorrei condividere la mia soluzione a questo problema.

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div class="spanned-content">Cell</div>
        </div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan:after {
        /* What to do here? */
        content: "c";
        display: inline;
        visibility: hidden;
    }
    .spanned-content {
        position: absolute;
    }
</style>

Ecco un violino . Non è davvero un arco di tempo e la soluzione è un po 'complicata, ma è utile in alcune situazioni. Testato su Chrome 46, Firefox 31 e IE 11.

Nel mio caso, ho dovuto presentare alcuni dati non tabulari in modo tabellare, mantenendo la larghezza delle colonne e dando titolo alle sottosezioni dei dati.

— Gabriel
fonte
Ovviamente puoi sempre fare affidamento su una soluzione grid come quella di Bootstrap. In questo caso particolare, avevo davvero bisogno della larghezza automatica che offre display: table.
— Gabriel
Inoltre, se vuoi dare al contenuto spanning un po 'di colore di sfondo, dovrai riempire la tua tr con l'intera quantità di tds :(
— Gabriel
Ho finito per creare una tabella e ridefinire il mio concetto di "dati tabulari" ^^
— Gabriel
-2

Usa tabelle nidificate per nidificare gli intervalli di colonne ...

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="table">
        <div class="row">
          <div class="cell">Cell</div>
          <div class="cell">Cell</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

Oppure usa 2 tabelle in cui l'estensione della colonna copre l'intera riga ...

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
</div>

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>
— Henry George
fonte
2
La domanda era: come farlo usando i CSS.
— Enno Gröper
4
Mi dispiace, ma suona come una pessima idea.
— Il fantasma di Madara l'
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.