【问题标题】：HTML colspan in CSSCSS 中的 HTML 跨度
【发布时间】：2011-01-25 03:05:57
【问题描述】：

我正在尝试构建类似于以下内容的布局：

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

底部填充上排的空间。

如果这是一个实际的表格，我可以使用<td colspan="3"> 轻松完成此操作，但由于我只是创建一个类似表格的布局，我不能使用<table> 标记。这可以使用 CSS 实现吗？

【问题讨论】：

最佳解决方案实际上取决于表格中的内容。如果它是数据（属于表中的东西），则使用表。如果您使用表格来控制页面的布局，那么下面的 HTML+CSS 解决方案之一会更好。
为这两种情况添加标记，然后使用媒体查询 CSS 类一次只显示一个。
忘掉 CSS。如果您显示表格数据，您肯定会知道它将跨越多少列。使用colspan 属性
我会通过 bootstrap 或 bootstrap 中的自定义网格来做到这一点
如果你使用 CSS3，你可以使用 columnSpan。与不同，您没有设置列数的选项，但您可以跨越所有列。 w3schools.com/cssref/css3_pr_column-span.asp

标签： css

【解决方案1】：

提供最新答案：今天最好的方法是使用 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>

【讨论】：

【解决方案2】：

我来到这里是因为目前 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>

【讨论】：

【解决方案3】：

CSS 属性“column-count”、“column-gap”和“column-span”可以做到这一点，将伪表的所有列保持在同一个包装器中（HTML 保持美观整洁)。

唯一需要注意的是，您只能定义 1 列或所有列，并且 column-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>

【讨论】：

【解决方案4】：

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

table-layout: fixed border-collapse: separate

以及容易分割/跨越的单元格“宽度”，即 4 x 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 是一种将“行”元素跳转到“表格”顶部/底部的便捷方法。

【讨论】：

【解决方案5】：

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

复制<td>s 并仅显示具有所需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>

【讨论】：

【解决方案6】：

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

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

【讨论】：

表格是结构元素，仅仅因为使用 colspan 改变了它的外观并不意味着它不是。 CSS 用于设置元素的样式，而不是更改结构。 W3C 在这里讨论表结构：w3.org/TR/html401/struct/tables.html#h-11.2
Rob，了解您的立场，但请查看 W3C 建议 - 特别是与整个表格范例有关的建议 - 您会发现他们考虑的部分内容肯定是 presentation 的表。这种将桌子纯粹视为结构的想法是一种当代小说，我认为我们都最好停止传播。关键是我们需要停止对表格的教条。我说它们是总是呈现是错误的，而你说它们是总是结构也是错误的。现实并没有那么简单。
看起来你的答案是流行的答案。 :) 我很高兴得知反餐桌教条（我已经接受）太严格了。我只支持我的回答，因为我仍然认为colspan 是适合这项工作的工具。我的回答是 75% 正确，而你的回答是 100% 正确。你应该回到 SO。
2 年后，我用谷歌搜索了这个并想投票给作者，但它说“不能为你自己的帖子投票”，我意识到是我，哈哈。我决定将接受的解决方案更改为这个，因为我觉得它有更好的信息。
这是一篇关于其他（未指定）答案的小论文，不是对所提问题的回答。

【解决方案7】：

另一个建议是完全使用 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>

【讨论】：

我知道这是旧的，但在这里搜索“colspan”线索。 2021年，这是唯一一个完全回答了OP问题并得到广泛浏览器支持的答案。

【解决方案8】：

尝试将display: table-cell; width: 1%; 添加到表格单元格元素中。

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

【讨论】：

这有什么帮助？表格的基本概念是每一行都有相同的单元格。如果其中一行具有成功实现“width:1%”的单元格，则所有行都将具有该列作为“width:1%”。 “colspan”的重点是取2个（或更多）固定宽度的列，将它们组合起来得到一个组合宽度。
你能解释一下吗？
OP 问题说没有表格标签，表格 css 几乎是一回事。与创建表相比，没有理由这样做。

【解决方案9】：

媒体查询类可用于通过重复标记实现可传递的内容。这是我使用引导程序的方法：

  <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 工作的人。

【讨论】：

提问者明确表示他不能使用 HTML 元素。如果他可以，这将是一个容易解决的问题。

【解决方案10】：

我已经创建了这个小提琴：

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;

}

【讨论】：

但我认为引导网格可以很容易地做到这一点
这不提供提问者正在寻找的解决方案。它只是创建一个内联的单元格行。

【解决方案11】：

您总是可以position:absolute; 事物并指定宽度。这不是一种非常流畅的方式，但它会起作用。

【讨论】：

实现这一点的方法远不止使用错误的标记。强制布局的绝对定位一直被认为是不好的做法。

【解决方案12】：

据我所知，css中没有colspan，不过近期会有column-span多列布局，不过由于只是CSS3中的草稿，大家可以去here查看。无论如何，您可以使用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%; }

使用此技巧的唯一原因是获得table-layout 行为的好处，如果仅将 div 和 span 宽度设置为某个百分比并不能满足我们的设计要求，我会经常使用它。

但如果您不需要从 table-layout 行为中受益，那么 durilai's answer 就足够适合您了。

【讨论】：

是的，但有一点修正：应该是 .span { ... 而不是 span { ...。
使用div标签显示表格数据和使用tables控制页面布局一样糟糕
@TichomirMitkov 取决于您是否使用响应式设计来更改布局 - 在这种情况下，有时这可以很好地工作。
这并不能真正回答这个问题，因为在您给出的示例中，您基本上有两个表格。（即两个具有“表”类的 div）

【解决方案13】：

如果你使用 div 和 span，当 datagrid-table 行的体积更大时，它会占用更多的代码大小。以下代码已在所有浏览器中检查

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

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

这不属于 CSS 的范围。 colspan 描述页面内容的结构，或者给表格中的数据赋予一些意义，这是 HTML 的工作。

【讨论】：

OP 明确提到“创建类似表格的 layout”，没有结构意义。这不是 CSS 表格的目的吗？没有客观的理由将 colspan 属性与整个表格区别对待，如果有一个仅设计 CSS 表格元素，为什么不是一个仅设计 CSS colspan 属性……
查看该问题的最高投票答案。你的观点已经在那里讨论过了，我倾向于同意它。自从我写下这个答案以来的五年里，我对这个问题的看法肯定发生了变化。

【解决方案16】：

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

【讨论】：

我不知道单元格的宽度。
那就不要放宽度了。没关系。但是如果你想让它们跨越相同的宽度，那么两个主 div 需要具有相同的宽度。
你可以使用 width: calc(100% / 3) 这比给中间多 1% 会好一点