Media Query类可用于实现带有重复标记的可传递内容。下面是我使用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用于移动，colspan 5用于其他使用CSS的工作。

另一个建议是使用flexbox而不是完全使用表格。这当然是一个“现代浏览器”的事情，但拜托，这是2016年;)

至少对于那些现在正在寻找答案的人来说，这可能是另一种解决方案，因为最初的帖子是在2010年发布的。

这里有一个很好的指南: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>

您可以尝试使用像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属性“column-count”、“column-gap”和“column-span”可以做到这一点，使伪表的所有列保持在相同的包装器中(HTML保持漂亮和整洁)。

唯一需要注意的是，您只能定义1列或所有列，而且列-span在Firefox中还不能工作，因此需要一些额外的CSS来确保它能够正确显示。 https://www.w3schools.com/css/css3_multiple_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>

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;

}