据我所知，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的答案将足够适合你。

colspan没有简单、优雅的CSS模拟。

对这个问题的搜索将返回各种解决方案，其中包括一系列替代方案，包括绝对定位、大小，以及类似的各种浏览器和特定环境的警告。阅读，并根据你的发现做出最明智的决定。

我创造了这把小提琴:

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;

}

您可以尝试使用像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>

你可以这样定位:绝对的;并指定宽度。这不是一个很流畅的方法，但这是可行的。

如果你来这里是因为你必须打开或关闭colspan属性(比如移动布局):

复制<td>，只显示所需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>