Colspan / Rowspan dla elementów, których wyświetlanie jest ustawione na table-cell

Mam następujący kod:

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

Całkiem proste. Jak dodać colspan (lub odpowiednik colspan) dla elementów z display: table-cell?

O ile mi wiadomo, brak colspan / rowspan to tylko jedno z ograniczeń display:table. Zobacz ten post:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Ponieważ OP nie mówi wprost, że rozwiązanie musi być czystym CSS, będę uparty i dorzucę moje obejście, które wymyśliłem dzisiaj, zwłaszcza, że ​​jest o wiele bardziej eleganckie niż posiadanie tabeli wewnątrz tabeli.

Przykład równa się <table> z dwiema komórkami na wiersz i dwoma wierszami, gdzie komórka w drugim wierszu to td with colspan="2".

Przetestowałem to z Iceweasel 20, Firefox 23 i 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>

Akcja na żywo (demo) tutaj .

EDYCJA: Doprecyzowałem kod, aby był bardziej przyjazny dla drukarki, ponieważ domyślnie pozostawiają kolory tła. Stworzyłem również rowspan-demo , zainspirowane późną odpowiedzią tutaj.

Prostsze rozwiązanie, które działa dla mnie w Chrome 30:

Colspan można emulować, używając display: tablezamiast display: table-rowdla wierszy:

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

Jedyną pułapką jest to, że komórki rzędów ułożonych w stos nie są wyrównane w pionie, ponieważ pochodzą z różnych tabel.

Jeśli szukasz prostego sposobu CSS na symulację colspana, możesz użyć 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>

Po prostu użyj pliku table.

Tabela nie jest mile widziana, gdy jest używana do celów układu.

Wygląda to na dane tabelaryczne (wiersze / kolumny danych). Dlatego polecam używanie pliku table.

Zobacz moją odpowiedź na to pytanie, aby uzyskać więcej informacji:

tworząc to samo z elementami div jako tabelami

Oto jeden ze sposobów łączenia kolumn w CSS, których użyłem w mojej własnej sytuacji.

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>

Istnieje rozwiązanie, dzięki któremu colspan ma szerokość całej tabeli. Nie możesz użyć tej techniki do kolspan części tabeli.

Kod:

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

Wyjaśnienie:

Używamy pozycji bezwzględnej na colspan, aby uzyskać pełną szerokość tabeli. Sam stół wymaga pozycji względem siebie. Używamy manekiny do utrzymania wysokości rzędów, pozycja bezwzględna nie jest zgodna z przepływem dokumentu.

Oczywiście możesz również użyć Flexbox i siatki, aby rozwiązać ten problem w dzisiejszych czasach.

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>

Kod

Można to zrobić za pomocą czystego CSS i wyśrodkowania tekstu na „fałszywej” kolumnie colspan.

Sztuczka polega na ustawieniu wierszy na position:relative, następnie umieszczeniu „pustych elementów div” w miejscu, w rowktórym chcesz utworzyć colspan(muszą mieć height, aby działały), ustawieniu miejsca, w cellktórym znajduje się zawartość jako display:grid, i na końcu zastosowaniu position:absolutedo elementu wewnątrz komórki (i wyśrodkuj ją tak, jak możesz wyśrodkować każdy inny element absolutny).

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

Używając odpowiednich klas DIV i atrybutów CSS, możesz naśladować pożądane efekty colspan i rowspan.

Oto CSS

.table {
    display:table;
}

.row {
    display:table-row;
}

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

Oto przykładowy kod HTML

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

Z tego, co widzę w obu pytaniach i większości odpowiedzi, wynika, że ​​ludzie zdają się zapominać, że w każdym danym elemencie div działającym jako „komórka tabeli” można wstawić inny element div działający jak osadzona tabela i rozpocząć proces nad.

*** To nie jest efektowne, ale działa dla tych, którzy szukają tego typu formatowania i chcą uniknąć TABELI. Jeśli jest to LAYOUT DANYCH, TABELE nadal działają w HTML5.

Miejmy nadzieję, że to komuś pomoże.

Możesz ustawić pozycję zawartości colspan jako „względną”, a wiersz jako „bezwzględny” w następujący sposób:

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

Obecnie nie możesz tego osiągnąć.

AFAIK byłoby to objęte tabelami CSS , specyfikacją, która wydaje się być obecnie w stanie „w toku”.

Możesz wypróbować to rozwiązanie, w którym dowiesz się, jak zastosować colspan za pomocą 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;
            }

Nawet jeśli jest to stare pytanie, chciałbym podzielić się moim rozwiązaniem tego problemu.

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

Oto skrzypce . Tak naprawdę nie jest to rozpiętość, a rozwiązanie jest nieco hakerskie, ale w niektórych sytuacjach jest przydatne. Testowane na Chrome 46, Firefox 31 i IE 11.

W moim przypadku musiałem przedstawić niektóre dane nietabelaryczne w sposób tabelaryczny, zachowując szerokość kolumn i nadając tytuły podsekcji danych.

Użyj tabel zagnieżdżonych do zagnieżdżenia rozpiętości kolumn ...

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

Lub użyj 2 tabel, w których rozpiętość kolumn obejmuje cały wiersz ...

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