DIV表格colspan：怎么样？
如何在div.table {display: table;} div.tr {display: table-row;} etc.实现colspan / rowspan行为（例如div.table {display: table;} div.tr {display: table-row;} etc. ）table？
我可以想象，这将会被CSS表格覆盖，这个CSS表格虽然在CSS主页上提到，但目前处于“尚未以任何forms发布”的状态，
实际上，目前你无法做到这一点。
你可以简单地使用两个表格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>
所以基本上，你已经将所有的<table> ， <tr>和<td>元素转换为<div>元素，并且使它们的样式与他们replace的原始表元素完全相同。
这有什么意义呢？
这听起来像有人告诉过你，现代网页devise中不应该使用表格，这是正确的，但不是这样 – 你所做的事实并没有改变你的代码。 当然还没有摆脱桌面; 这只是让阅读变得更难。
关于在现代网站中不使用表格的观点的真正含义是在不使用包括放置表格单元网格的布局技术的情况下实现所需的页面布局。
这是通过使用position样式和float样式，以及其他许多，但肯定不display:table-cell; 所有这一切都可以实现，而不需要colspans或rowspans。
另一方面，如果您试图在页面上放置表格数据的实际块（例如购物篮中的项目和价格列表或一组统计数据等），则表格仍然是正确的解决scheme。 表格并没有从HTML中删除，因为它们仍然相关并且仍然有用。 关键是可以使用它们，但只能在实际显示数据表的地方使用。
你的问题的简短答案是我不认为你可以 – colspan和rowspan是特定于表。 如果你想继续使用它们，你将需要使用表格。
如果你的页面布局依赖于表格，那么在没有重新devise布局的情况下，实际上没有任何意义可以去掉表格元素。 它没有达到任何目的。
希望有所帮助。
试图在无表devise思维并不意味着你不能使用表:)
只有您可以想象，表格数据可以呈现在表格中，而其他元素（主要是div）用于创build页面的布局。
所以我应该说，你必须阅读一些关于div元素样式的信息，或者使用这个页面作为一个很好的示例页面！
祝你好运 ;）
你总是可以使用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>
为了获得基于表格布局的“colspan”function，您需要放弃使用display：table | 显示：行样式。 特别是在每个数据项跨越多行的情况下，每行中需要不同大小的“单元”。
我已经通过将它们分开来实现了这一点，例如：
<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>
或者你可以为每个表定义不同的类
<div class="table2"> <div class="row2"> <div class="col2">TD</div> </div> </div>
从用户的angular度来看，他们的行为是一致的。
当然，它并没有解决所有的colspan / rowspan问题，但它确实回答了我对时间的需求。
<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>
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
你只需在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>
你可以这样做（其中data-x具有适当的显示：xxxx set）：
<!-- TH --> <div data-tr> <div data-th style="width:25%">TH</div> <div data-th style="width:50%"> <div data-table style="width:100%"> <div data-tr> <div data-th style="width:25%">TH</div> <div data-th style="width:25%">TH</div> <div data-th style="width:25%">TH</div> <div data-th style="width:25%">TH</div> </div> </div> </div> <div data-th style="width:25%">TH</div> </div> <!-- TD --> <div data-tr> <div data-td style="width:25%">TD</div> <div data-th style="width:50%"> <div data-table style="width:100%"> <div data-tr> <div data-td style="width:25%">TD</div> <div data-td style="width:25%">TD</div> <div data-td style="width:25%">TD</div> <div data-td style="width:25%">TD</div> </div> <div data-tr> ... </div> </div> </div> <div data-td style="width:25%">TD</div> </div>
