CSS中的HTML colspan

的CSS CSS

斯丁Sam

2020-03-24

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

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

底部填充上一行的空间。

如果这是一个实际的表，则可以使用轻松地完成此操作<td colspan="3">，但是由于我只是在创建类似表的布局，因此无法使用<table>标签。使用CSS可以吗？

第3510篇《CSS中的HTML colspan》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答

米亚 2020.03.24

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

Gil 2020.03.24

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

蛋蛋 2020.03.24

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

null 2020.03.24

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