Colspan / Rowspan cho các phần tử có màn hình được đặt thành ô bảng

Tôi có mã sau:

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

Khá đơn giản. Làm cách nào để thêm colspan (hoặc tương đương với colspan) cho các phần tử có display: table-cell?

Theo như tôi biết, việc thiếu colspan / rowspan chỉ là một trong những hạn chế của display:table. Xem bài đăng này:

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

Vì OP không quy định rõ ràng rằng giải pháp phải là CSS thuần túy, nên tôi sẽ ngoan cố và đưa ra giải pháp mà tôi đã tìm ra hôm nay, đặc biệt là vì nó thanh lịch hơn nhiều so với việc có một bảng bên trong bảng.

Ví dụ bằng với <table> với hai ô trên mỗi hàng và hai hàng, trong đó ô ở hàng thứ hai là một td với colspan="2".

Tôi đã thử nghiệm điều này với Iceweasel 20, Firefox 23 và 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>

Live action (demo) tại đây .

CHỈNH SỬA: Tôi đã tinh chỉnh mã để thân thiện với máy in hơn, vì chúng để màu nền theo mặc định. Tôi cũng đã tạo bản trình diễn rowspan , lấy cảm hứng từ câu trả lời muộn ở đây.

Một giải pháp đơn giản hơn phù hợp với tôi trong Chrome 30:

Colspan có thể được mô phỏng bằng cách sử dụng display: tablethay vì sử dụng display: table-rowcho các hàng:

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

Cạm bẫy duy nhất là các ô của các hàng xếp chồng lên nhau sẽ không sắp xếp theo chiều dọc, vì chúng từ các bảng khác nhau.

Nếu bạn đang tìm kiếm một cách CSS đơn giản để mô phỏng một con chó con, bạn có thể sử dụng 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>

Đơn giản chỉ cần sử dụng table .

bảng chỉ bị đánh giá cao khi được sử dụng cho mục đích bố trí.

Điều này có vẻ giống như dữ liệu dạng bảng (hàng / cột dữ liệu). Do đó, tôi khuyên bạn nên sử dụngtable .

Xem câu trả lời của tôi cho câu hỏi này để biết thêm thông tin:

tạo điều tương tự với div dưới dạng bảng

Đây là một cách để mở rộng các cột trong CSS mà tôi đã sử dụng cho trường hợp của riêng mình.

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>

Có một giải pháp để làm cho cột dài bằng chiều rộng của toàn bộ bảng. Bạn không thể sử dụng kỹ thuật này để sắp xếp một phần của bảng.

Mã:

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

Giải trình:

Chúng tôi sử dụng vị trí tuyệt đối trên colspan để làm cho nó có chiều rộng đầy đủ của bảng. Bảng chính nó cần vị trí tương đối. Chúng tôi sử dụng một dummycell để duy trì chiều cao của các hàng, vị trí tuyệt đối không theo dòng chảy của tài liệu.

Tất nhiên, bạn cũng có thể sử dụng flexbox và lưới để giải quyết vấn đề này ngày nay.

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>

Mã

Nó có thể được thực hiện chỉ với CSS thuần túy và căn giữa văn bản trên colspan "giả".

Bí quyết là đặt các hàng thành position:relative, sau đó đặt "divs trống" ở rownơi bạn muốn tạo colspan(chúng phải có heightđể hoạt động), đặt vị celltrí của nội dung display:gridvà cuối cùng, áp dụng position:absolutecho phần tử bên trong ô (và căn giữa nó vì bạn có thể căn giữa bất kỳ phần tử tuyệt đối nào khác).

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

Bằng cách sử dụng các lớp div và thuộc tính CSS thích hợp, bạn có thể bắt chước các hiệu ứng mong muốn của colspan và rowspan.

Đây là CSS

.table {
    display:table;
}

.row {
    display:table-row;
}

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

Đây là HTML mẫu

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

Từ những gì tôi thấy trong cả câu hỏi và hầu hết các câu trả lời, mọi người dường như quên rằng trong bất kỳ div đã cho nào hoạt động như một "ô bảng", bạn có thể chèn một div khác hoạt động như một bảng được nhúng và bắt đầu quá trình kết thúc.

*** Nó không hấp dẫn, nhưng nó hoạt động đối với những người đang tìm kiếm loại định dạng này và họ muốn tránh các BẢNG. Nếu đối với DỮ LIỆU LAYOUT, BẢNG vẫn hoạt động trong HTML5.

Hy vọng rằng, điều này sẽ giúp một ai đó.

Bạn có thể đặt vị trí của nội dung colspan là "tương đối" và hàng là "tuyệt đối" như sau:

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

Bạn không thể đạt được điều này hiện tại.

AFAIK điều này sẽ được bao phủ bởi CSS Table , một đặc điểm kỹ thuật có vẻ như hiện đang ở trạng thái "đang tiến hành".

Bạn có thể thử giải pháp này, nơi bạn có thể tìm thấy cách áp dụng colspan bằng 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;
            }

Ngay cả khi đây là một câu hỏi cũ, tôi cũng muốn chia sẻ giải pháp của tôi cho vấn đề này.

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

Đây là một trò đùa . Nó không thực sự là một khoảng thời gian và giải pháp là một chút khó khăn, nhưng nó hữu ích trong một số tình huống. Đã thử nghiệm trên Chrome 46, Firefox 31 và IE 11.

Trong trường hợp của tôi, tôi phải trình bày một số dữ liệu không phải dạng bảng theo cách lập bảng, giữ nguyên độ rộng của các cột và đặt tiêu đề cho các phần con của dữ liệu.

Sử dụng các bảng lồng nhau để lồng các nhịp cột ...

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

Hoặc sử dụng 2 bảng trong đó khoảng cột bao gồm toàn bộ hàng ...

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