我来这里是因为目前WordPress表块不支持colspan参数，我想我会用CSS替换它。这是我的解决方案，假设列的宽度相同:

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>

您可以尝试使用像http://960.gs/这样的网格系统

你的代码应该是这样的，假设你使用的是“12列”布局:

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

这不是CSS权限的一部分。colspan描述页面内容的结构，或者为表中的数据赋予一些含义，这是HTML的工作。

提供一个最新的答案:今天最好的方法是使用css网格布局，像这样:

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

以及HTML

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

据我所知，css中没有colspan，但在不久的将来会有用于多列布局的column-span，但由于它只是CSS3中的草稿，你可以在这里检查它。不管怎样，你可以使用div和span来解决这个问题。

这就是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>

这就是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%; }

使用这个技巧的唯一原因是为了获得表格布局行为的好处，如果仅仅设置div和span宽度到一定的百分比并不能满足我们的设计要求，我就会使用它。

但如果你不需要从表格布局行为中获益，那么durilai的答案将足够适合你。

我已经取得了一些成功，尽管它依赖于一些属性来工作:

表布局:固定 border-collapse:独立

以及单元格宽度，即4个单元格的宽度为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/

此外，应用display:table-header-group或table-footer-group是将'row'元素跳转到'table'的顶部/底部的便捷方法。