CSS 中的 HTML colspan
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2403990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML colspan in CSS
提问by Tower
I'm trying to construct a layout similar to the following:
我正在尝试构建类似于以下内容的布局：
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
where the bottom is filling the space of the upper row.
底部填充上排的空间。
If this were an actual table, I could easily accomplish this with <td colspan="3">, but as I'm simply creating a table-like layout, I cannot use <table>tags. Is this possible using CSS?
如果这是一个实际的表格，我可以使用 轻松完成此操作<td colspan="3">，但由于我只是创建了一个类似表格的布局，因此我无法使用<table>标签。这可以使用 CSS 吗？
回答by David
There's no simple, elegant CSS analog for colspan.
没有简单、优雅的 CSS 模拟colspan。
Searches on this very issue will return a variety of solutions that include a bevy of alternatives, including absolute positioning, sizing, along with a similar variety of browser- and circumstance-specific caveats. Read, and make the best informed decision you can based on what you find.
对这个问题的搜索将返回各种解决方案，其中包括一系列替代方案，包括绝对定位、大小调整，以及类似的各种浏览器和特定环境的警告。阅读，并根据您的发现做出最明智的决定。
回答by Hendra Uzia
There is no colspan in css as far as I know, but there will be column-spanfor multi column layout in the near future, but since it is only a draft in CSS3, you can check it in here. Anyway you can do a workaround using divand spanwith table-like display like this.
据我所知 css 中没有 colspan，不过column-span近期会有多列布局，不过由于它只是 CSS3 中的草稿，你可以在这里查看。无论如何，您可以使用div和span像这样的类似表格的显示来解决方法。
This would be the HTML:
这将是 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>
And this would be the css:
这将是 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%; }
The only reason to use this trick is to gain the benefit of table-layoutbehaviour, I use it alot if only setting div and span width to certain percentage didn't fullfil our design requirement.
使用这个技巧的唯一原因是为了获得table-layout行为的好处，如果仅将 div 和 span 宽度设置为特定百分比并不能满足我们的设计要求，我会经常使用它。
But if you don't need to benefit from the table-layoutbehaviour, then durilai's answerwould suit you enough.
但是，如果您不需要从这种table-layout行为中受益，那么durilai 的答案就足够适合您了。
回答by Winter
Another suggestion is using flexbox instead of tables altogether. This is a "modern browser" thing of course, but come on, it's 2016 ;)
另一个建议是完全使用 flexbox 而不是表格。这当然是一个“现代浏览器”的东西，但是来吧，现在是 2016 年；)
At least this might be an alternative solution for those looking for an answer to this nowadays, since the original post was from 2010.
至少对于那些现在正在寻找答案的人来说，这可能是一个替代解决方案，因为原始帖子是 2010 年的。
Here's a great guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这是一个很好的指南：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>回答by Dustin Laine
<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>
回答by mwcz
That isn't part of the purview of CSS. colspandescribes the structure of the page's content, or gives some meaning to the data in the table, which is HTML's job.
这不是 CSS 权限的一部分。 colspan描述页面内容的结构，或者给表格中的数据赋予一些意义，这是 HTML 的工作。
回答by Jeff
You could trying using a grid system like http://960.gs/
您可以尝试使用像http://960.gs/这样的网格系统
Your code would be something like this, assuming you're using a "12 column" layout:
假设您使用的是“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>
回答by Toby 1 Kenobi
To provide an up-to-date answer: The best way to do this today is to use css grid layout like this:
提供最新的答案：今天最好的方法是使用 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;
}
and the HTML
和 HTML
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>
回答by user3464561
I've had some success, although it relies on a few properties to work:
我已经取得了一些成功，尽管它依赖于一些属性来工作：
table-layout: fixedborder-collapse: separate
table-layout: fixedborder-collapse: separate
and cell 'widths' that divide/span easily, i.e. 4 x cells of 25% width:
和容易划分/跨越的单元格“宽度”，即 25% 宽度的 4 个单元格：
.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/
https://jsfiddle.net/sfjw26rb/2/
Also, applying display:table-header-group or table-footer-group is a handy way of jumping 'row' elements to the top/bottom of the 'table'.
此外，应用 display:table-header-group 或 table-footer-group 是一种将“行”元素跳转到“表格”顶部/底部的便捷方式。
回答by Ismail Farooq
Try adding display: table-cell; width: 1%;to your table cell element.
尝试添加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>回答by MistyDawn
The CSS properties "column-count", "column-gap", and "column-span" can do this in a way that keeps all the columns of the pseudo-table inside the same wrapper (HTML stays nice and neat).
CSS 属性“column-count”、“column-gap”和“column-span”可以将伪表的所有列保持在同一个包装器中（HTML 保持良好和整洁）。
The only caveats are that you can only define 1 column or all columns, and column-span doesn't yet work in Firefox, so some additional CSS is necessary to ensure it will displays correctly. https://www.w3schools.com/css/css3_multiple_columns.asp
唯一需要注意的是，您只能定义 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>