Html Colspan/Rowspan，用于显示设置为表格单元格的元素_Html_Css

Html Colspan/Rowspan，用于显示设置为表格单元格的元素

html css

Html Colspan/Rowspan，用于显示设置为表格单元格的元素,html,css,Html,Css,我有以下代码： <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 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>


细胞
细胞
细胞
.桌子{
显示：表格；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
}
.科尔斯潘2{
/*在这里做什么*/
}

很简单。如何为具有

display:table cell

的元素添加colspan（或等效的colspan）？

只需使用

表格即可
表格仅在用于布局目的时才不受欢迎
这看起来像是表格数据（数据的行/列）。因此，我建议使用表

有关更多信息，请参见我对的回答：
据我所知，缺少colspan/rowspan只是显示：table
的限制之一。见此帖：
使用嵌套表嵌套列跨距
<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>


细胞
细胞
细胞

或者使用列跨度覆盖整行的两个表
<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>


细胞
细胞
细胞
因为OP没有明确规定解决方案必须是纯CSS，所以我会固执地使用我今天想出的解决方法，特别是因为它比在表中放一个表要优雅得多
示例相当于，每行两个单元格，每行两行，其中第二行的单元格是td，带有colspan=“2”

我已经用Iceweasel20、Firefox23和IE10测试过了

div.table{
显示：表格；
宽度：100px；
背景颜色：浅蓝色；
边界塌陷：塌陷；
边框：1px纯红；
}
分区行{
显示：表格行；
}
分区单元{
显示：表格单元格；
边框：1px纯红；
}
科尔斯潘分区，
div.colspan+div.cell{
边界：0；
}
div.colspan>div{
宽度：1px；
}
div.colspan>div>div{
位置：相对位置；
宽度：99px；
溢出：隐藏；
}

第1单元
第2单元
第三单元
在Chrome 30中为我提供了一个更简单的解决方案：
Colspan可以通过使用display:table
而不是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;
}

.table{
显示：块；
}
.行{
显示：表格；
宽度：100%；
}
.细胞{
显示：表格单元格；
}
.row.colspan2{/*您必须将'colspan2'类添加到该行，并删除其中未使用的类*/
显示：块；
}

唯一的缺陷是堆叠行的单元格不会垂直对齐，因为它们来自不同的表。
如果您正在寻找一种直接的CSS方法来模拟colspan，您可以使用display:table caption


.table{
显示：表格；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
边框：1px实心#000；
}
.科尔斯潘2{
/*在这里做什么*/
显示：表格标题；
}

细胞
细胞
细胞
通过使用适当的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>    


X
Y
Z
2.
4.
6.
A.
B
行距

从我在两个问题和大多数回答中看到的情况来看，人们似乎忘记了，在任何充当“表单元格”的给定div中，可以插入另一个充当嵌入表的div，然后重新开始该过程
***这并不吸引人，但对于那些寻找这种格式的人来说确实有效，他们希望避免使用表格。如果它用于数据布局，那么表在HTML5中仍然可以工作
希望这会对某人有所帮助。
您可以将colspan内容的位置设置为“相对”，将行设置为“绝对”，如下所示：
.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}

即使这是一个老问题，我也愿意分享我对这个问题的解决方案
<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>


细胞
细胞
细胞
.桌子{
显示：表格；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
}
.科尔斯潘：之后{
/*在这里做什么*/
内容：“c”；
显示：内联；
可见性：隐藏；
}
.跨越内容{
位置：绝对位置；
}

这是一本书。
这不是一个真正的跨度，解决方案有点粗糙，但在某些情况下是有用的。在Chrome46、Firefox31和IE11上测试
在我的例子中，我必须以表格的方式呈现一些非表格数据，保持列的宽度，并为数据的子部分提供标题。
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应用colspan

HTML:
这里有一种在CSS中跨列的方法，我在自己的情况下使用了这种方法


.table{
显示：表格；
}
.行{
显示：表格行；
}
.细胞{
显示：表格cel
<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 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>

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;
            }