CSS中的HTML colspan

另一个建议是完全使用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范围的一部分。 colspan描述页面内容的结构，或为表中的数据赋予一些含义，这就是HTML的工作。

尝试添加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>

没有简单，优雅的CSS类似物colspan。

搜索此问题将返回各种解决方案，其中包括多种选择，包括绝对定位，调整大小以及类似的针对浏览器和具体情况的警告。阅读并根据发现的内容做出最明智的决定。