显示设置为表格单元的元素的Colspan / Rowspan
我有以下代码：
<div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> <div class="row"> <div class="cell colspan2">Cell</div> </div> </div> <style> .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } .colspan2 { /* What to do here? */ } </style> 非常简单 如何为display: table-cell元素添加一个colspan（或等价的colspan） display: table-cell ？
据我所知，colspan / rowspan的缺乏只是display:table一个限制。 看到这个职位：
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
由于OP没有明确地规定解决scheme必须是纯粹的CSS，所以我会固执己见，并将我的解决方法放在今天，特别是因为它比表中的表要优雅得多。
示例等于<table>，每行两行两行，其中第二行的单元格是一个带colspan="2"的td。
我已经用Iceweasel 20，Firefox 23和IE 10testing过了。
div.table { display: table; width: 100px; background-color: lightblue; border-collapse: collapse; border: 1px solid red; } div.row { display: table-row; } div.cell { display: table-cell; border: 1px solid red; } div.colspan, div.colspan+div.cell { border: 0; } div.colspan>div { width: 1px; } div.colspan>div>div { position: relative; width: 99px; overflow: hidden; }
<div class="table"> <div class="row"> <div class="cell">cell 1</div> <div class="cell">cell 2</div> </div> <div class="row"> <div class="cell colspan"> <div><div> cell 3 </div></div> </div> <div class="cell"></div> </div> </div>
在Chrome 30中适用于我的更简单的解决scheme：
可以通过使用display: table而不是display: table-row来模拟Colspan display: table-row对于行，使用display: table-row ：
.table { display: block; } .row { display: table; width: 100%; } .cell { display: table-cell; } .row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */ display: block; }
唯一的缺点是堆叠行的单元格不会垂直alignment，因为它们来自不同的表格。
简单地使用一张table 。
当用于布局目的时，表格只是皱起了眉头。
这似乎是表格数据（行/列数据）。 所以我会build议使用一个table 。
请参阅我对此问题的回答以获取更多信息：
用div创build和表一样的东西
如果你正在寻找一个直接的CSS方法来模拟一个colspan，你可以使用display: table-caption 。
.table { display: table; } .row { display: table-row; } .cell { display: table-cell; border: 1px solid #000; } .colspan2 { /* What to do here? */ display: table-caption; }
<div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> <div class="row"> <div class="cell colspan2">Cell</div> </div> </div>
CSS
.tablewrapper { position: relative; } .table { display: table; position: relative } .row { display: table-row; } .cell { border: 1px solid red; display: table-cell; } .cell.empty { border: none; width: 100px; } .cell.rowspanned { position: absolute; top: 0; bottom: 0; width: 100px; } .cell.colspan { position: absolute; left: 0; right: 0; }
HTML
<div class="tablewrapper"> <div class="table"> <div class="row"> <div class="cell rowspanned"> Center </div> <div class="cell"> Top right </div> </div> <div class="row"> <div class="cell empty"></div> <div class="cell colspan"> Bottom right </div> </div> </div> </div>
码
通过使用适当的div类和CSS属性，可以模仿colspan和rowspan的所需效果。
这是CSS
.table { display:table; } .row { display:table-row; } .cell { display:table-cell; padding: 5px; vertical-align: middle; }
这是示例HTML
<div class="table"> <div class="row"> <div class="cell"> <div class="table"> <div class="row"> <div class="cell">X</div> <div class="cell">Y</div> <div class="cell">Z</div> </div> <div class="row"> <div class="cell">2</div> <div class="cell">4</div> <div class="cell">6</div> </div> </div> </div> <div class="cell"> <div class="table"> <div class="row"> <div class="cell"> <div class="table"> <div class="row"> <div class="cell">A</div> </div> <div class="row"> <div class="cell">B</div> </div> </div> </div> <div class="cell"> ROW SPAN </div> </div> </div> </div> </div> </div>
从我看到的两个问题和大多数回应中，人们似乎忘记了在任何一个作为“表格单元格”的div中，您都可以插入另一个像embedded表格一样的div，并启动过程过度。
***这不是迷人的，但它确实为那些寻找这种types的格式，他们想避免表。 如果它的DATA LAYOUT，TABLEs仍然在HTML5中工作。
希望这会帮助别人。
您可以将colspan内容的位置设置为“相对”，将行设置为“绝对”，如下所示：
.table { display: table; } .row { display: table-row; position: relative; } .cell { display: table-cell; } .colspan2 { position: absolute; width: 100%; }
目前你无法做到这一点。
AFAIK这将由CSS表格覆盖，这是一个目前处于“正在进行中”状态的规范。
你可以试试这个解决scheme，在这里你可以find如何使用div来应用colspan https://codepen.io/pkachhia/pen/JyWMxY
HTML：
<div class="div_format"> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell cell_lable">Project Name</div> <div class="divTableCell cell_value">: Testing Project</div> <div class="divTableCell cell_lable">Project Type</div> <div class="divTableCell cell_value">: Web application</div> </div> <div class="divTableRow"> <div class="divTableCell cell_lable">Version</div> <div class="divTableCell cell_value">: 1.0.0</div> <div class="divTableCell cell_lable">Start Time</div> <div class="divTableCell cell_value">: 2016-07-10 11:00:21</div> </div> <div class="divTableRow"> <div class="divTableCell cell_lable">Document Version</div> <div class="divTableCell cell_value">: 2.0.0</div> <div class="divTableCell cell_lable">End Time</div> <div class="divTableCell cell_value">: 2017-07-10 11:00:23</div> </div> <div class="divTableRow"> <div class="divTableCell cell_lable">Document Revision</div> <div class="divTableCell cell_value">: 3</div> <div class="divTableCell cell_lable">Overall Result</div> <div class="divTableCell cell_value txt_bold txt_success">: Passed</div> </div> </div> <div class="divCaptionRow"> <div class="divCaptionlabel">Description</div> <div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div> </div> </div> </div>
CSS：
body { font-family: arial } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .div_format { width: 100%; display: inline-block; position: relative } .divTable { display: table; width: 100%; } .divTableRow { display: table-row } .divTableHeading { background-color: #EEE; display: table-header-group } .divTableCell, .divTableHead { display: table-cell; padding: 10px } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold } .divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold } .divTableBody { display: table-row-group } .divCaptionRow{ display: table-caption; caption-side: bottom; width: 100%; } .divCaptionlabel{ caption-side: bottom; display: inline-block; background: #ccc; padding: 10px; width: 15.6%; margin-left: 10px; color: #727272; } .divCaptionValue{ float: right; width: 83%; padding: 10px 1px; border-bottom: 1px solid #dddddd; border-right: 10px solid #fff; color: #5f5f5f; text-align: left; } .cell_lable { background: #d0d0d0; border-bottom: 1px solid #ffffff; border-left: 10px solid #ffffff; border-right: 10px solid #fff; width: 15%; color: #727272; } .cell_value { border-bottom: 1px solid #dddddd; width: 30%; border-right: 10px solid #fff; color: #5f5f5f; }
使用嵌套表来嵌套列跨度…
<div class="table"> <div class="row"> <div class="cell"> <div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> </div> </div> </div> <div class="row"> <div class="cell">Cell</div> </div> </div>
或者使用2列，其中列跨度覆盖整行
<div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> </div> <div class="table"> <div class="row"> <div class="cell">Cell</div> </div> </div>
即使这是一个老问题，我想分享我的解决scheme，这个问题。
<div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> <div class="row"> <div class="cell colspan"> <div class="spanned-content">Cell</div> </div> </div> </div> <style> .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } .colspan:after { /* What to do here? */ content: "c"; display: inline; visibility: hidden; } .spanned-content { position: absolute; } </style>
这是一个小提琴 。 这不是一个跨度，解决scheme有点怪异，但在某些情况下是有用的。 testingChrome 46，Firefox 31和IE 11。
在我的情况下，我不得不以表格的方式呈现一些非表格数据，保持列的宽度并为数据的子部分赋予标题。
