Tôi đang cố gắng xây dựng một bố cục tương tự như sau:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

trong đó phía dưới đang lấp đầy không gian của hàng trên.

Nếu đây là một bảng thực tế, tôi có thể dễ dàng thực hiện điều này với <td colspan="3">, nhưng vì tôi chỉ đơn giản là tạo bố cục giống như bảng , tôi không thể sử dụng <table>thẻ. Điều này có thể sử dụng CSS không?

Không có tương tự CSS đơn giản, thanh lịch cho colspan.

Các tìm kiếm về chính vấn đề này sẽ trả về một loạt các giải pháp bao gồm một loạt các lựa chọn thay thế, bao gồm định vị tuyệt đối, kích thước, cùng với một loạt các cảnh báo cụ thể về trình duyệt và hoàn cảnh cụ thể. Đọc và đưa ra quyết định sáng suốt nhất mà bạn có thể dựa trên những gì bạn tìm thấy.

Theo như tôi biết thì không có colspan trong css, nhưng sẽ có column-spanbố cục nhiều cột trong tương lai gần, nhưng vì nó chỉ là bản nháp trong CSS3, nên bạn có thể kiểm tra nó ở đây . Dù sao, bạn có thể thực hiện một cách giải quyết bằng cách sử dụng divvà spanvới màn hình giống như bảng.

Đây sẽ là HTML:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

Và đây sẽ là css:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

Lý do duy nhất để sử dụng thủ thuật này là để đạt được lợi ích của table-layouthành vi, tôi sử dụng nó rất nhiều nếu chỉ đặt div và độ rộng khoảng cho tỷ lệ nhất định không đáp ứng đầy đủ yêu cầu thiết kế của chúng tôi.

Nhưng nếu bạn không cần phải hưởng lợi từ table-layouthành vi đó, thì câu trả lời của durilai sẽ phù hợp với bạn.

Một đề xuất khác là sử dụng flexbox thay vì các bảng hoàn toàn. Tất nhiên đây là một thứ "trình duyệt hiện đại", nhưng thôi, đó là năm 2016;)

Ít nhất đây có thể là một giải pháp thay thế cho những người đang tìm kiếm câu trả lời cho vấn đề này ngày nay, vì bài viết gốc là từ năm 2010.

Đây là một hướng dẫn tuyệt vời: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.table {
  border: 1px solid red;
  padding: 2px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
}
.table-cell {
  border: 1px solid blue;
  flex: 1 30%;
}
.colspan-3 {
  border: 1px solid green;
  flex: 1 100%;
}

<div class="table">
  <div class="table-cell">
    row 1 - cell 1
  </div>
  <div class="table-cell">
    row 1 - cell 2
  </div>
  <div class="table-cell">
    row 1 - cell 3
  </div>
  <div class="table-cell colspan-3">
    row 2 - cell 1 (spans 3 columns)
  </div>
</div>

<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>

Đó không phải là một phần của mục đích của CSS. colspanmô tả cấu trúc nội dung của trang hoặc cung cấp một số ý nghĩa cho dữ liệu trong bảng, đó là công việc của HTML.

Để cung cấp câu trả lời cập nhật: Cách tốt nhất để làm điều này ngay hôm nay là sử dụng bố cục lưới css như thế này:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}

và HTML

<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>

Bạn có thể thử sử dụng hệ thống lưới như http://960.gs/

Mã của bạn sẽ giống như thế này, giả sử bạn đang sử dụng bố cục "12 cột":

<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>

Hãy thử thêm vào display: table-cell; width: 1%;thành phần ô bảng của bạn.

.table-cell {
  display: table-cell;
  width: 1%;
  padding: 4px;
  border: 1px solid #efefef;
}

<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
</div>

Tôi đã có một số thành công, mặc dù nó dựa vào một số thuộc tính để làm việc:

table-layout: fixed border-collapse: separate

và các ô 'độ rộng' có thể phân chia / kéo dài dễ dàng, tức là 4 x ô có chiều rộng 25%:

.div-table-cell,
* {
  box-sizing: border-box;
}

.div-table {
  display: table;
  border: solid 1px #ccc;
  border-left: none;
  border-bottom: none;
  table-layout: fixed;
  margin: 10px auto;
  width: 50%;
  border-collapse: separate;
  background: #eee;
}

.div-table-row {
  display: table-row;
}

.div-table-cell {
  display: table-cell;
  padding: 15px;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-align: center;
  background: #ddd;
}

.colspan-3 {
  width: 300%;
  display: table;
  background: #eee;
}

.row-1 .div-table-cell:before {
  content: "row 1: ";
}

.row-2 .div-table-cell:before {
  content: "row 2: ";
}

.row-3 .div-table-cell:before {
  content: "row 3: ";
  font-weight: bold;
}

.div-table-row-at-the-top {
  display: table-header-group;
}

<div class="div-table">

  <div class="div-table-row row-1">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

  <div class="div-table-row row-2">

    <div class="div-table-cell colspan-3">
      Cor blimey he's only gone and done it.
    </div>

  </div>

  <div class="div-table-row row-3">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

</div>

https://jsfiddle.net/sfjw26rb/2/

Ngoài ra, áp dụng hiển thị: nhóm tiêu đề bảng hoặc nhóm chân trang là một cách tiện dụng để nhảy các phần tử 'hàng' lên trên cùng / dưới cùng của 'bảng'.

nếu bạn sử dụng div và span, nó sẽ chiếm nhiều kích thước mã hơn khi hàng bảng dữ liệu có nhiều hơn về khối lượng. Mã dưới đây được kiểm tra trong tất cả các trình duyệt

HTML:

<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4> 
</div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>

CSS:

#gridheading {
    background: #ccc;
    border-bottom: 1px dotted #BBBBBB;
    font-size: 12px;
    line-height: 30px;
    text-transform: capitalize;
}
.data {
    border-bottom: 1px dotted #BBBBBB;
    display: block;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    word-wrap: break-word;
}
 h4 {
    border-right: thin dotted #000000;
    display: table-cell;
    margin-right: 100px;
    text-align: center;
    width: 100px;
    word-wrap: break-word;
}
.data .big {
    margin-right: 150px;
    width: 200px;
}

column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

http://www.quackit.com/css/css3/properIES/css_column-span.cfm

Nếu bạn đến đây vì bạn phải bật hoặc tắt colspanthuộc tính (nói về bố cục trên thiết bị di động):

Sao y <td>và chỉ hiển thị những cái có mong muốn colspan:

table.colspan--on td.single {
  display: none;
}

table.colspan--off td.both {
  display: none;
}

<!-- simple table -->
<table class="colspan--on">
  <thead>
    <th>col 1</th>
    <th>col 2</th>
  </thead>
  <tbody>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
    <tr>
      <!-- the <td> spanning both columns -->
      <td class="both" colspan="2">both</td>

      <!-- the two single-column <td>s -->
      <td class="single">A</td>
      <td class="single">B</td>
    </tr>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
  </tbody>
</table>
<!--
that's all
-->

 

<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
  tableClasses.toggle('colspan--on');
  tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>

Các thuộc tính CSS "đếm cột", "khoảng cách cột" và "nhịp cột" có thể thực hiện việc này theo cách giữ tất cả các cột của bảng giả trong cùng một trình bao bọc (HTML vẫn đẹp và gọn gàng).

Nhắc nhở duy nhất là bạn chỉ có thể xác định 1 cột hoặc tất cả các cột và nhịp cột không hoạt động trong Firefox, vì vậy một số CSS bổ sung là cần thiết để đảm bảo nó sẽ hiển thị chính xác. https://www.w3schools.com/css/css3_mult Môn_columns.asp

.split-me {
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.cols {
  /* column-span is 1 by default */
  column-span: 1;
}

div.three-span {
  column-span: all !important;
}

/* alternate style for column-span in Firefox */
@-moz-document url-prefix(){
  .three-span {
    position: absolute;
    left: 8px;
    right: 8px;
    top: auto;
    width: auto;
  }
}


    

<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>

<div class='split-me'>
  <div class='col-1 cols'>Text inside Column 1 div.</div>
  <div class='col-2 cols'>Text inside Column 2 div.</div>
  <div class='col-3 cols'>Text inside Column 3 div.</div>
  <div class='three-span'>Text div spanning 3 columns.</div>
</div>



  <style>
/* Non-Essential Visual Styles */

html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; } 
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
  border: 2px dashed black; border-top: none;
  text-align: center; background-color: #ddffdd;
}
  </style>

Tôi đến đây vì hiện tại khối bảng WordPress không hỗ trợ tham số colspan và tôi nghĩ rằng tôi sẽ thay thế nó bằng CSS. Đây là giải pháp của tôi, giả sử rằng các cột có cùng chiều rộng:

table {
  width: 100%;
}

table td {
  width: 50%;
  background: #dbdbdb;
  text-align: center;
}

table tr:nth-child(2n+1) {
  position:relative;
  display:block;
  height:20px;
  background:green;
}

table tr:nth-child(2n+1) td {
  position:absolute;
  left:0;
  right:-100%;
  width: auto;
  top:0;
  bottom:0;
  background:red;
  text-align:center;
}

<table>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
</table>

Bạn luôn có thể position:absolute;mọi thứ và chỉ định chiều rộng. Đó không phải là một cách rất trôi chảy để làm điều đó, nhưng nó sẽ làm việc.

Tôi đã tạo ra câu đố này:

http://jsfiddle.net/wo40ev18/3/

HTML

<div id="table">
<div class="caption">
    Center Caption
</div>
<div class="group">
      <div class="row">
            <div class="cell">Link 1t</div>
            <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell ">Link 2</div>
      </div>
</div>

CSS

   #table {
    display:table;
}

.group {display: table-row-group; }

.row {
    display:table-row;
    height: 80px;
    line-height: 80px;
}

.cell {
    display:table-cell;
    width:1%;
    text-align: center;
    border:1px solid grey;
    height: 80px
        line-height: 80px;
}

.caption {
    border:1px solid red; caption-side: top; display: table-caption; text-align: center; 
    position: relative;
    top: 80px;
    height: 80px;
      height: 80px;
    line-height: 80px;

}

Các lớp Media Query có thể được sử dụng để đạt được một cái gì đó có thể vượt qua với đánh dấu trùng lặp. Đây là cách tiếp cận của tôi với bootstrap:

  <tr class="total">
    <td colspan="1" class="visible-xs"></td>
    <td colspan="5" class="hidden-xs"></td>
    <td class="focus">Total</td>
    <td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
  </tr>

colspan 1 cho thiết bị di động, colspan 5 cho những người khác có CSS ​​đang làm việc.