Colspan / Rowspan untuk elemen yang tampilannya diatur ke sel tabel

Saya memiliki kode berikut:

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

Cukup mudah. Bagaimana cara menambahkan colspan (atau setara dengan colspan) untuk elemen display: table-cell?

Setahu saya, kurangnya colspan / rowpan hanyalah salah satu keterbatasan display:table. Lihat posting ini:

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

Karena OP tidak secara eksplisit mengatur bahwa solusi harus CSS murni, saya akan keras kepala dan memberikan solusi yang saya temukan hari ini, terutama karena itu jauh lebih elegan daripada memiliki tabel di dalam tabel.

Contoh sama dengan <tabel> dengan dua sel per baris dan dua baris, di mana sel di baris kedua adalah td dengan colspan="2".

Saya telah menguji ini dengan Iceweasel 20, Firefox 23 dan 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>

Aksi langsung (demo) di sini .

EDIT: Saya telah menyempurnakan kode agar lebih ramah printer, karena mereka membiarkan warna latar belakang secara default. Saya juga membuat rowpan-demo , terinspirasi oleh jawaban terlambat di sini.

Solusi sederhana yang berhasil untuk saya di Chrome 30:

Colspan dapat ditiru dengan menggunakan display: tablealih-alih display: table-rowuntuk baris:

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

Satu-satunya kelemahan adalah bahwa sel baris yang ditumpuk tidak akan sejajar secara vertikal, karena berasal dari tabel yang berbeda.

Jika Anda mencari cara CSS langsung untuk mensimulasikan colspan, Anda dapat menggunakan 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>

Cukup gunakan a table.

tabel hanya disukai saat digunakan untuk tujuan tata letak.

Ini tampak seperti data tabel (baris / kolom data). Oleh karena itu saya akan merekomendasikan menggunakan file table.

Lihat jawaban saya untuk pertanyaan ini untuk informasi lebih lanjut:

membuat hal yang sama dengan div sebagai tabel

Inilah salah satu cara untuk merentang kolom di CSS yang saya gunakan untuk situasi saya sendiri.

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>

Ada solusi untuk membuat colspan menjadi lebar seluruh tabel. Anda tidak dapat menggunakan teknik ini untuk mengumpulkan sebagian dari tabel.

Kode:

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

Penjelasan:

Kami menggunakan posisi absolut pada colspan untuk membuatnya menjadi lebar penuh tabel. Tabel itu sendiri membutuhkan posisi relatif. Kami menggunakan dummycell untuk menjaga ketinggian baris, posisi absolut tidak mengikuti aliran dokumen.

Tentu saja Anda juga dapat menggunakan flexbox dan grid untuk mengatasi masalah ini belakangan ini.

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>

Kode

Ini dapat dilakukan hanya dengan CSS murni dan memusatkan teks di sepanjang colspan "palsu".

Triknya adalah mengatur baris ke position:relative, lalu menempatkan "div kosong" di rowtempat yang Anda inginkan colspan(harus memilikinya heightagar berfungsi), setel celltempat konten berada sebagai display:grid, dan terakhir, terapkan position:absoluteke elemen di dalam sel (dan pusatkan karena Anda dapat memusatkan elemen absolut lainnya).

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

Dengan menggunakan kelas div dan atribut CSS yang sesuai, Anda dapat meniru efek colspan dan rowpan yang diinginkan.

Inilah CSS

.table {
    display:table;
}

.row {
    display:table-row;
}

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

Berikut contoh HTMLnya

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

Dari apa yang saya lihat di kedua pertanyaan, dan sebagian besar tanggapan, adalah orang-orang tampaknya lupa bahwa dalam div tertentu yang bertindak sebagai "sel tabel" Anda dapat memasukkan div lain yang bertindak seperti tabel yang disematkan, dan memulai proses lebih.

*** Ini tidak glamor, tetapi berhasil bagi mereka yang mencari jenis pemformatan ini dan mereka ingin menghindari TABLE. Jika untuk TATA LETAK DATA, TABEL masih berfungsi di HTML5.

Semoga ini bisa membantu seseorang.

Anda dapat menyetel posisi konten colspan sebagai "relatif" dan baris "absolut" seperti ini:

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

Anda tidak dapat mencapai ini saat ini.

AFAIK ini akan dicakup oleh Tabel CSS , spesifikasi yang tampaknya saat ini berada dalam status "sedang dalam proses".

Anda dapat mencoba solusi ini, di mana Anda dapat menemukan cara menerapkan colspan menggunakan 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;
            }

Meskipun ini adalah pertanyaan lama, saya ingin membagikan solusi saya untuk masalah ini.

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

Ini biola . Ini sebenarnya bukan rentang, dan solusinya agak hack, tetapi berguna dalam beberapa situasi. Diuji di Chrome 46, Firefox 31 dan IE 11.

Dalam kasus saya, saya harus menyajikan beberapa data non-tabular dengan cara tabular, menjaga lebar kolom dan memberi judul pada sub-bagian data.

Gunakan tabel bersarang untuk menyarangkan rentang kolom ...

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

Atau gunakan 2 tabel di mana rentang kolom mencakup seluruh baris ...

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