Colspan/Rowspan，用于显示设置为 table-cell 的元素-解网

问：

我有以下代码：

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.colspan2 {
  /* What to do here? */
}

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

很简单。如何为元素添加 colspan（或等效的 colspan）？display: table-cell

HTML CSS格式

7赞 punkrockbuddyholly 2/14/2012

你不能只用一张桌子吗？这会容易得多。另外，如果这是表格数据，它也会更有语义。

0赞 punkrockbuddyholly 2/14/2012

@thirtydot它可能，那只是一种痛苦和不必要的。像 960 这样的网格系统基本上可以实现这一点，但适用于整个页面布局。

0赞 thirtydot 2/14/2012

@MrMisterMan：我不确定你在说什么。960.gs 不使用 .display: table-cell

0赞 punkrockbuddyholly 2/14/2012

@thirtydot对不起，我忘记了OP问的具体问题。你是对的，你不能通过CSS添加colspan。我指出，您可以使 div 的行为像行和列，其中包括跨越多列的单元格。

0赞 Bernard Dusablon 4/2/2013

使用模拟表格，就像你在第一级组织所做的那样，例如，这将使您能够创建一个粘性页脚。对于 colspan 仿真，您可以在唯一的单元格中创建一个嵌套表，其中将有一行和任意数量的单元格，或者使用简单的浮动 div。

答：

6赞 Curtis 2/14/2012 #1

只需使用 .table

只有当用于布局目的时，表才会受到反对。

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

有关更多信息，请参阅我对此问题的回答：

使用 div 作为表创建相同的内容

15赞 Madara's Ghost 2/14/2012

问题是，它不适用于表格数据，所以我不想使用表格:)

16赞 Slight 4/5/2016

我不明白为什么CSSing所有内容的行为都与表格完全相同，这在某种程度上比仅使用表格更可取。诚然，垃圾邮件不是最漂亮的html，但这是唯一的原因吗？每个人都说表格不是“打算”用于格式化的，但html本身并不是“意味着”做我们今天标准认为可以接受的一半事情，包括Web应用程序。trtd

4赞 spinn 3/1/2017

差不多一年后，但是——轻微的，我和你一样，对那些除了“桌子过时”之外没有其他原因而避开桌子的人感到恼火。但是，我遇到了一些响应式设计，其中将桌子不是桌子很有用，因此可以在较低的宽度上重新排列。得知我没有 divs 的 colspan 有点令人失望。

0赞 user984003 7/4/2023

我使用 table/tr/td 格式化了我的搜索栏和菜单图标。当我开始使用屏幕阅读器进行测试时，我发现了为什么我不应该这样做。Android 的 TalkBack 会像读取数据表一样读取表格、行数、列数等。但是，然后看到如果我使用 role=“presentation”，我可以保留 table/tr/td 注意到 Gmail 通过其搜索栏格式做到这一点。

57赞 Russell Zahniser 2/14/2012 #2

据我所知，缺少 colspan/rowspan 只是的局限性之一。看这个帖子：display:table

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

-2赞 Henry George 1/8/2013 #3

使用嵌套表嵌套列跨度...

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

3赞 Enno Gröper 1/8/2013

问题是，如何使用CSS做到这一点。

5赞 Madara's Ghost 1/8/2013

对不起，但这听起来是一个非常糟糕的主意。

30赞 F-3000 8/28/2013 #4

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

真人秀（演示）在这里。

编辑：我微调了代码，使其更适合打印，因为它们默认保留了背景色。我还创建了 rowspan-demo，灵感来自这里的迟到答案。

0赞 Varun Verma 8/17/2017

我正在寻找类似的解决方案。但相反，我在第一行有 5 个单元格。在底行，我需要 1 个与顶行大小相同的单元格。然后一个单元格的 colspan=2 和另一个单元格的 colspan=2，使其在底行中总共有 5 个单元格。这是基于您的解决方案的 jsfiddle 问题。有什么想法吗？jsfiddle.net/7wdza4ye/1

1赞 F-3000 8/17/2017

@VarunVerma，您必须在单元格 7 和 8 之间添加空单元格。只需添加即可（至少在Firefox中）。在这种设计中，您需要用空单元格填充。例如，如果您拥有它，使单元格 7 为 colspan=3，单元格 8 为正常，那么在单元格 7 和 8 之间需要两个空单元格。除非你要设计别的东西（边距？单个自定义div？）。此外，100px 的宽度和 5 个单元格使事情变得棘手，因为单词会拉伸 css-cells，overflow-settings 似乎没有区别。您还需要重新计算。<div class="cell"></div>widthdiv.colspan>div>div

0赞 Varun Verma 8/19/2017

成功了。谢谢。事实上，我确实在单元格 8 之后添加了一个空单元格，因为底部边框没有显示。这是最新的：jsfiddle.net/7wdza4ye/3。确定如何获得单元格 7 和 8 之间的边界。有什么建议吗？感谢您的帮助。

1赞 F-3000 8/19/2017

@VarunVerma，使用 Chrome 时，8 之后没有空单元格的外边框是不完整的，因此确实是必需的。在单元格 7 和 8 之间添加边框的简单方法可以是这样的： .它需要放置在设置 div.colspan 无边框的规则下方的某个位置，否则它将被否决。div.colspan{border-left:1px solid red}

0赞 Varun Verma 8/22/2017

谢谢@F-3000。这很有帮助。其余的，这里是基于F-3000解决方案的最新链接： jsfiddle.net/7wdza4ye/4

17赞 Philippe97 10/21/2013 #5

在Chrome 30中为我工作的更简单的解决方案：

Colspan 可以通过使用而不是 for 行来模拟：display: tabledisplay: 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;
}

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

9赞 stacigh 11/22/2014 #6

如果你正在寻找一种直接的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>

0赞 Raj Kamal 9/28/2017

太棒了，你摇滚！

2赞 Michiel 7/10/2018

使用 display： table-caption 将跨越所有列并将行放在表格的顶部，就像 html 表格中的 caption 元素一样，所以这实际上不起作用。仅当您要跨越第一行或最后一行的所有列时。

0赞 JRC 7/25/2015 #7

通过使用适当的 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 中，您可以插入另一个充当嵌入式表的 div，然后重新开始该过程。

它并不迷人，但它确实适用于那些寻找此类格式并且他们希望避免 TABLE 的人。如果它用于 DATA LAYOUT，则 TABLE 在 HTML5 中仍然有效。

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

0赞 F-3000 8/25/2015

首先，HTML5 完全支持 - 只是人们应该避免将其用于视觉格式。使用它来显示结构化数据是应该使用它的地方，除非其他东西（例如，作为示例）更适合该任务。其次，伙计，4张桌子。你把有趣的问题带到了桌子上（行跨度），但你的答案却要求改用。我得看看我的解决方案是如何工作的......<table><ul><table>

0赞 F-3000 8/25/2015

我会编辑我之前的评论，但时间限制来了。就像我对 colspan 的回答一样，rowspan 可以比你的麻烦少得多。原始方法。亲眼看看吧。

0赞 JRC 9/3/2015

感谢您的反馈。我从来没有说过HTML5不支持表格。许多人只是想避免它。有时，在编写 Web 应用程序（而不仅仅是广告类型的页面）时，您需要更多用于按钮和/或控件放置的固定布局。

0赞 Justo 10/5/2015 #8

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

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}

-2赞 Gabriel 3/22/2016 #9

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

<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 上测试。

就我而言，我必须以表格方式呈现一些非表格数据，保持列的宽度并为数据的子部分提供标题。

0赞 Gabriel 3/22/2016

当然，您始终可以依赖像 Bootstrap 这样的网格解决方案。在这种特殊情况下，我真的需要提供 display： table 的自动宽度。

0赞 Gabriel 3/22/2016

此外，如果你想给跨区的内容一些背景色，你必须用全部的 tds 填充你的 tr :(

0赞 Gabriel 3/22/2016

我最终制作了一个表格，并重新定义了我的“表格数据”概念^^

1赞 bderevyaga 8/16/2016 #10

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>

法典

0赞 naXa stands with Ukraine 10/19/2016 #11

你目前无法做到这一点。

AFAIK 这将包含在 CSS Tables 中，该规范目前似乎处于“正在进行中”状态。

0赞 pkachhia 8/9/2017 #12

您可以尝试此解决方案，您可以在其中找到如何使用 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;
            }

5赞 Tim 12/1/2017 #13

这是我在 CSS 中跨越列的一种方法，我用于我自己的情况。

https://jsfiddle.net/mb8npttu/

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px dotted red;
}

.colspan {
  max-width: 1px;
  overflow: visible;
}

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

3赞 kshetline 6/1/2018

我必须增强才能获得我想要的结果，但它效果很好。.colspanwhite-space: nowrap;

2赞 J.T. Houtenbos 8/6/2019 #14

有一种解决方案可以使 colspan 成为整个桌子的 widht。不能使用此技术来并列表的一部分。

法典：

* {
  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来解决这个问题。

1赞 Joe82 11/8/2019 #15

它可以通过纯CSS来完成，并将文本居中在“假”colspan上。

诀窍是将行设置为，然后将“空 div”放在您要制作的位置（它们必须具有才能工作），将内容所在的位置设置为，最后，应用于单元格内的元素（并将其居中，就像您可以居中任何其他绝对元素一样）。position:relativerowcolspanheightcelldisplay:gridposition: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>

上一个：私有与受保护 - 可见性良好实践问题 [已关闭]

下一个：如何在 PHP 中检查特定类型的对象

Colspan/Rowspan，用于显示设置为 table-cell 的元素

Colspan/Rowspan for elements whose display is set to table-cell

评论

评论

评论

评论

评论

评论

评论

评论