Html DIV 表 colspan：如何？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4746061/
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
DIV table colspan: how?
提问by artemave
How do I achieve colspan/rowspan behavior in tableless (e.g. div.table {display: table;} div.tr {display: table-row;} etc.) table?
如何在无div.table {display: table;} div.tr {display: table-row;} etc.表（例如）表中实现 colspan/rowspan 行为？
采纳答案by Quentin
I would imagine that this would be covered by CSS Tables, a specification which, while mentioned on the CSS homepage, appears to currently be at a state of "not yet published in any form"
我想这将被 CSS Tables 覆盖，该规范虽然在CSS 主页上提到，但目前似乎处于“尚未以任何形式发布”的状态
In practical terms, you can't achieve this at present.
实际上，您目前无法做到这一点。
回答by Nick Zulu
you can simply use two table divs, for instance:
您可以简单地使用两个表格 div，例如：
<div style="display:table; width:450px; margin:0 auto; margin-top:30px; ">
<div style="display:table-row">
<div style="width:50%">element1</div>
<div style="width:50%">element2</div>
</div>
</div>
<div style="display:table; width:450px; margin:0 auto;">
<div style="display:table-row">
<div style="width:100%">element1</div>
</div>
</div>works great!
效果很好！
回答by Spudley
So basically, you've turned all your <table>, <tr>and <td>elements into <div>elements, and styled them to work exactly like the original table elements they've replaced?
所以基本上，您已将所有<table>,<tr>和<td>元素转换为<div>元素，并将它们的样式设置为与它们替换的原始表格元素完全相同？
What's the point in that?
这有什么意义？
It sounds like someone's told you that you shouldn't be using tables in modern web design, which is sort ofright, but not in this way -- what you've done doesn't actually change anything about your code. It certainly hasn't got rid of the table; it's just made it harder to read.
这听起来像一个人的告诉你，你不应该在现代网页设计，这是一个使用表格的排序正确的，但不能以这种方式-你做了什么并不真正改变你的代码的任何事情。它当然没有摆脱桌子。它只是让它更难阅读。
The true meaning of the point about not using tables in modern sites is to achieve the page layout you want without using the kind of layout techniques that involve setting out a grid of table cells.
在现代站点中不使用表格这一点的真正含义是在不使用涉及设置表格单元格网格的布局技术的情况下实现您想要的页面布局。
This is achieved by using positionstyles and floatstyles, and a number of others, but certainly not display:table-cell;etc. All of this can be achieved without ever needing colspans or rowspans.
这是通过使用position样式和float样式以及许多其他样式来实现的，但肯定不是display:table-cell;等。所有这些都可以在不需要 colspan 或 rowspan 的情况下实现。
On the other hand, if you are trying to place an actual block of tabular data on the page - for instance a list of items and prices in a shopping basket, or a set of statistics, etc, then a table is still the correct solution. Tables were not removed from HTML, because they are still relevant and still useful. The point is that it is fine to use them, but only in places where you are actually display a table of data.
另一方面，如果您尝试在页面上放置实际的表格数据块 - 例如购物篮中的商品和价格列表，或一组统计数据等，那么表格仍然是正确的解决方案. 表格并未从 HTML 中删除，因为它们仍然相关且仍然有用。关键是可以使用它们，但只能在您实际显示数据表的地方使用。
The short answer to your question is I don't think you can -- colspanand rowspanare specific to tables. If you want to carry on using them, you will need to use tables.
对您的问题的简短回答是我认为您不能 -colspan并且rowspan特定于表格。如果您想继续使用它们，则需要使用表格。
If your page layout is such that it relies on tables, there really isn't any point doing a half-way house effort to get rid of the table elements without reworking how the layout is done. It doesn't achieve anything.
如果您的页面布局依赖于表格，那么在不重新设计布局的情况下，做半途而废的努力来摆脱表格元素确实没有任何意义。它没有取得任何成就。
Hope that helps.
希望有帮助。
回答by Sander
Trying to think in tableless design does not mean that you can not use tables :)
尝试在无表设计中思考并不意味着您不能使用表 :)
It is only that you can think of it that tabular data can be presented in a table, and that other elements (mostly div's) are used to create the layout of the page.
只是你能想到表格数据可以在表格中呈现，其他元素（主要是div）用于创建页面布局。
So I should say that you have to read some information on styling with div-elements, or use this pageas a good example page!
所以我应该说你必须阅读一些关于 div-elements 样式的信息，或者使用 这个页面作为一个很好的示例页面！
Good luck ;)
祝你好运 ;）
回答by techexpert
You could always use CSS to simply adjust the width and the height of those elements that you want to do a colspanand rowspanand then simply omit displaying the overlapped DIVs. For example:
你想要做一个你总是可以使用CSS来简单地调整宽度和这些元素的高度colspan和rowspan，然后简单地省略显示重叠的DIV。例如：
<div class = 'td colspan3 rowspan5'> Some data </div>
<style>
.td
{
display: table-cell;
}
.colspan3
{
width: 300px; /*3 times the standard cell width of 100px - colspan3 */
}
.rowspan5
{
height: 500px; /* 5 times the standard height of a cell - rowspan5 */
}
</style>
回答by Ed DeGagne
In order to get "colspan" functionality out of div based tabular layout, you need to abandon the use of the display:table | display:row styles. Especially in cases where each data item spans more than one row and you need different sized "cells" in each row.
为了从基于 div 的表格布局中获得“colspan”功能，您需要放弃使用 display:table | 显示：行样式。特别是在每个数据项跨越多行并且每行中需要不同大小的“单元格”的情况下。
回答by Yatko
<div style="clear:both;"></div>- may do the trick in some cases; not a "colspan" but may help achieve what you are looking for...
<div style="clear:both;"></div>- 在某些情况下可能会起作用；不是“colspan”，但可能有助于实现您正在寻找的...
<div id="table">
<div class="table_row">
<div class="table_cell1"></div>
<div class="table_cell2"></div>
<div class="table_cell3"></div>
</div>
<div class="table_row">
<div class="table_cell1"></div>
<div class="table_cell2"></div>
<div class="table_cell3"></div>
</div>
<!-- clear:both will clear any float direction to default, and
prevent the previously defined floats from affecting other elements -->
<div style="clear:both;"></div>
<div class="table_row">
<!-- the float is cleared, you could have 4 divs (columns) or
just one with 100% width -->
<div class="table_cell123"></div>
</div>
</div>
回答by bennylin
I've achieved this by separating them in different , e.g.:
我通过将它们分开来实现这一点，例如：
<div class="table">
<div class="row">
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">TD</div>
</div>
</div>
or you can define different classes for each tables
或者您可以为每个表定义不同的类
<div class="table2">
<div class="row2">
<div class="col2">TD</div>
</div>
</div>
From the user point of view they behave identically.
从用户的角度来看，它们的行为是相同的。
Granted it doesn't solve all colspan/rowspan problems but it does answer my need of the time.
当然，它不能解决所有 colspan/rowspan 问题，但它确实满足了我的时间需求。
回答by karthikeyan ganesan
you just use the :nth-child(num) in css for add the colspan like
您只需在 css 中使用 :nth-child(num) 来添加 colspan，例如
<style>
div.table
{
display:table;
width:100%;
}
div.table-row
{
display:table-row;
}
div.table-td
{
display:table-cell;
}
div.table-row:nth-child(1)
{
display:block;
}
</style>
<div class="table>
<div class="table-row">test</div>
<div class="table-row">
<div class="table-td">data1</div>
<div class="table-td">data2</div>
</div>
</div>
回答by Adam Hunter Peck
column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */
http://www.quackit.com/css/css3/properties/css_column-span.cfm
http://www.quackit.com/css/css3/properties/css_column-span.cfm
