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

108

我有以下代码：

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

非常简单。如何为带有的元素添加colspan（或等价的colspan）display: table-cell？

html  css 
— 马达拉的幽灵
source
5
你不能只用桌子吗？这样会容易得多。另外，如果这是表格数据，那么它也将更具语义。
— punkrockbuddyholly 2012年
@thirtydot可能可以，只是痛苦和不必要。像960这样的网格系统基本上可以实现这一点，但是需要整个页面布局。
— punkrockbuddyholly 2012年
@MrMisterMan：我不确定你在说什么。960.gs不使用display: table-cell。
— 2012年
@thirtydot抱歉，我忘了OP提出的具体问题。没错，您无法通过CSS添加colspan。我指出的是，您可以使div的行为类似于行和列，并且包括跨多个列的单元格。
— punkrockbuddyholly 2012年
像在第一层组织中一样使用模拟表，这将使您能够创建粘性页脚。对于您的colspan仿真，您可以在唯一的单元格中创建一个嵌套表，其中将只有一行和所需的单元格，或者使用简单的div浮动。
— 伯纳德·杜萨隆

Answers:

27

由于OP并未明确规定解决方案必须是纯CSS，所以我会很固执，并提出我今天想出的解决方法，特别是因为它比在表中包含表要优雅得多。

示例等于<table>，每行有两个单元格，每行有两个单元格，其中第二行的单元格是带有的td colspan="2"。

我已经使用Iceweasel 20，Firefox 23和IE 10进行了测试。

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>
展开摘要

真人（演示）在这里。

编辑：我将代码微调为对打印机更友好，因为它们默认情况下不使用背景色。我还创建了rowpan-demo，灵感来自此处的最新答案。

— F-3000
source
我正在寻找类似的解决方案。但是，相反，我在最上面一行有5个单元格。在底行，我需要1个与顶行大小相同的单元格。然后，一个具有colspan = 2的单元格和另一个具有colspan = 2的单元格也使其在底行中总共有5个单元格。这是基于您的解决方案的jsfiddle问题。有什么想法吗？jsfiddle.net/7wdza4ye/1
— Varun Verma
1
@VarunVerma，必须在单元格7和8之间添加一个空单元格。只需添加即可<div class="cell"></div>（至少在Firefox中）。通过这种设计，您需要填充空单元格。例如，如果您拥有7单元格colspan = 3且8单元格正常，那么您将需要在7单元格和8单元格之间有两个空单元格。除非您要设计其他内容（边距？单个自定义div？） 。另外，宽度为100px和5个单元格使事情变得棘手，因为单词会拉伸css-cells，所以溢出设置似乎没有什么区别。您还需要重新计算width的div.colspan>div>div。
— F-3000
有效。谢谢。实际上，我确实在第8个单元格之后添加了一个空单元格，因为没有显示底部边框。这是最新的：jsfiddle.net/7wdza4ye/3。确定如何获得单元格7和8之间的边界。有什么建议吗？谢谢你的帮助。
— Varun Verma
1
@ VarunVerma，Chrome的外部边框不完整，在8点后没有空单元格，因此确实是必需的。简单的方法来添加边框小区7和8之间可能是这样的：div.colspan{border-left:1px solid red}。需要将其放置在设置div.colspan无边界的规则下方，否则将被否决。
— F-3000
感谢@ F-3000。那很有帮助。对于其余部分，这是基于F-3000解决方案的最新链接：jsfiddle.net/7wdza4ye/4
— Varun Verma
16

在Chrome 30中适用于我的更简单的解决方案：

可以使用display: table代替来模拟Colspan 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;
}

唯一的陷阱是堆叠行的单元格不会垂直对齐，因为它们来自不同的表。

— 菲利普97
source
7

如果您正在寻找直接模拟CSS跨距的CSS方法，则可以使用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>
展开摘要

— 坚定
source
真是太神奇了！
— Raj Kamal
1
使用display：table-caption将跨越所有列并将行放置在表的顶部，就像html table中的caption元素一样，因此这实际上不起作用。仅当您要跨越第一行或最后一行的所有列时。
— 米歇尔
6

只需使用即可table。

仅在用于布局目的时才会皱眉。

这似乎是表格数据（数据行/列）。因此，我建议使用table。

有关更多信息，请参见我对这个问题的回答：

用div创建与表相同的东西

— t
source
11
问题是，它不是用于表格数据的，所以我不想使用表:)
— Madara的鬼魂2012年
13
我不明白为什么CSS对所有事物进行行为使其完全像表一样比使用表更可取。诚然tr/ td垃圾邮件是不是最漂亮的HTML，但就是这个原因吗？每个人都说表格不是用于格式化的“意思”，但是html本身并不是“意思”来完成当今我们认为可以接受的标准（包括Web应用程序）的一半。
— 轻微
4
将近一年后，但是-有点，我与其他人一样避免使用桌子，除了“桌子过时”之外，我也很讨厌。但是，我遇到了一些响应式设计，在这些设计中，使表不是表很有用，因此可以将表重新排列为较小的宽度。学习我没有divs的colspan有点令人失望。
— 旋转
4

这是一种在我自己的情况下使用的跨CSS列的方法。

https://jsfiddle.net/mb8npttu/

<div class='table'>
    <div class='row'>
        <div class='cell colspan'>
            spanning
        </div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>

    <div class='row'>
        <div class='cell'>1</div>
        <div class='cell'>2</div>
        <div class='cell'>3</div>
    </div>
</div>

<style>
    .table { display:table; }
    .row { display:table-row; }
    .cell { display:table-cell; }
    .colspan { max-width:1px; overflow:visible; }
</style>
— 提姆
source
2
我不得不加强.colspan与white-space: nowrap;得到我想要的结果，但它的工作很大。
— kshetline
2

有一种解决方案可以使colspan成为整个表的宽度。您不能使用此技术来整理表的一部分。

码：

    *{
      box-sizing: border-box;
    }
    .table {
        display: table;
        position: relative;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid red;
        padding: 5px;
        text-align: center;
    }
    .colspan {
        position: absolute;
        left: 0;
        width: 100%;
    }
    .dummycell {
        border-color: transparent;
    }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell dummycell">&nbsp;</div>
        <div class="cell colspan">Cell</div>
    </div>
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
</div>
展开摘要

说明：

我们在colspan上使用绝对位置来使其成为表格的整个宽度。表本身需要相对位置。我们使用虚拟单元格来维持行的高度，绝对位置不遵循文档流。

当然，这些天您也可以使用flexbox和grid解决此问题。

— JT豪滕博斯
source
1

的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>

码

— Bderevyaga
source
1

只需使用纯CSS并在“假” colspan中将文本居中即可完成。

技巧是将行设置为position:relative，然后将“空divs”放置在row要创建的位置colspan（它们必须具有height才能工作），将cell内容所在的位置设置为display:grid，最后将其position:absolute应用于元素在单元格内部（并使其居中，因为您可以将其他绝对元素居中）。

 .table {
        display: table;
  }
  .row {
      display: table-row;
      position: relative;
  }
  .cell {
      display: table-cell;
      background-color: blue;
      color: white;
      height: 26px;
      padding: 0 8px;
  } 
  .colspan2 {
      display: grid;
  }
  .colspan2 p {
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    margin: 0;
  }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2"><p>Cell</p></div>
        <div class="cell"></div>
    </div>
</div>
展开摘要

— 乔82
source
0

通过使用适当的div类和CSS属性，您可以模拟colspan和rowpan的预期效果。

这是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中，您可以插入充当嵌入式表的另一个div，然后开始该过程过度。

***它并不迷人，但是确实对那些正在寻找这种格式的人有用，并且他们希望避免使用TABLEs。如果用于DATA LAYOUT，则TABLE仍可以在HTML5中工作。

希望这会对某人有所帮助。

— JRC
source
首先，HTML5完全支持<table>-只是人们应该避免将其用于视觉格式。使用它的显示结构化数据是它应该使用，除非别的东西（比如<ul>，作为一个纯粹的例子）更适合的的任务。其次，花花公子，4表。您将有趣的问题带到表（rowspan）上，但是您的答案却哭了起来，以<table>代替使用。我要看看我的解决方案在这里是如何工作的……
— F-3000
我会编辑我先前的评论，但会遇到时间限制。就像我对colspan的回答一样，行跨可以用比原来的方法少很多麻烦来完成。自己看看吧。
— F-3000
感谢您的反馈意见。我从未说过HTML5不支持表格。许多人只是想避免这种情况。有时，在编写网络应用程序时（与仅是广告类型的页面相对），您需要更多的固定布局来放置按钮和/或控件。
— JRC 2015年
0

您可以将colspan内容的位置设置为“相对”，并将行设置为“绝对”，如下所示：

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}
— 朱斯托
source
0

您目前无法做到这一点。

AFAIK这将由CSS Tables覆盖，该规范目前似乎处于“进行中”状态。

— 纳沙
source
0

您可以尝试此解决方案，在这里您可以找到如何使用div https://codepen.io/pkachhia/pen/JyWMxY来应用colspan

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;
            }
— ach
source
-1

即使这是一个古老的问题，我也想分享我对这个问题的解决方案。

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

这是一个小提琴。这不是一个真正的跨度，解决方案有点笨拙，但是在某些情况下很有用。在Chrome 46，Firefox 31和IE 11上进行了测试。

就我而言，我必须以表格形式显示一些非表格数据，同时保持列的宽度并为数据的各个子节赋予标题。

— 加布里埃尔
source
当然，您始终可以依赖于Bootstrap之类的网格解决方案。在这种情况下，我确实需要提供display：table的自动宽度。
— 加百利
另外，如果您想为跨接的内容提供一些背景色，则必须用全部tds填充tr ：（
— Gabriel
我最终做了一张桌子，重新定义了“表格数据”的概念^^
— Gabriel
-2

使用嵌套表嵌套列范围...

<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>
— 亨利·乔治
source
2
问题是，如何使用CSS做到这一点。
— EnnoGröper2013年
4
对不起，但这听起来像是个坏主意。
— 马达拉的鬼魂
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.