Question

我现在有点困惑，因为我的CSS代码有效，但它根本不漂亮。我现在想重写这些CSS样式并通过LESS构建它们。我在使用display:table; / display:table-row;和display:table-cell;时遇到了大问题。

例如，我有以下代码：http://jsfiddle.net/La3kd/2/

如何才能使最后一个单元格（中心）不将上面的第二个单元格向右移动？最后一个单元格应该具有上面2个单元格的宽度。需要一些colspan。这太奇怪了，因为我觉得它在重新编写代码之前就已经有效了。但是现在右边的所有元素都完全转移了。

Answer 1

CSS没有colspan模拟。根据您的示例，您可以将最后一行标记为单独的不可控块。

您还可以将display: table-caption与caption-side: bottom结合使用，将表格行显示为跨越所有列的最后一行“行”。请参阅live demo。

Answer 2

一个想法是利用绝对定位。相对位置围绕表的包装，然后所有绝对定位变为以包装为中心的坐标。见下文。注意我定义了一个tableWrapper类，它将设置position：relative，然后定义tableRow的类 - 我假设你将设置.tableRow div {display：table-cell;所以我没有费心在每个div上放一个课。如果它的高度大于第二个div，你必须找到一种方法来阻止它与它下面的div重叠。应该是非常可行的。

<div class="tableWrapper">
  <div class="tableRow">
    <div>Column 1</div>
    <div>Column 2</div>
  </div>

  <div class="tableRow">
      <div style="border: 1px solid black; position: absolute; width: 100%;">appears like colspan=2</div>
      <div>&nbsp; (only here to force a row break before the next table row)</div>
  </div>

  <div class="tableRow">
    <div>Column 1</div>
    <div>Column 2</div>
  </div>
</div>

Answer 3

我找到了一个使用jquery和table-layout: fixed的解决方案。这是我的小提琴：http://jsfiddle.net/emilianolch/5nvxv5ko/

HTML：

<div class="table">
    <div class="table-row">
        <div class="table-cell">
            top left cell
        </div>
        <div class="table-cell">
            top right cell
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell colspan">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            bottom left cell
        </div>
        <div class="table-cell">
            bottom right cell
        </div>
    </div>
</div>

CSS：

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.table-row {
    display: table-row;
    border-collapse: collapse;
}

.table-cell {
    display: table-cell;
    padding: 5px;
    border: 1px solid black;
}

.table-cell.colspan {
    display: none;
    /* collapse border */
    margin-top: -1px;
    margin-bottom: -1px;
}

JS：

var rowWidth = $('.table-row:first').width();
var colWidth = $('.table-cell:first').width();
var marginRight = colWidth - rowWidth + 11;
$('.table-cell.colspan').css('margin-right', marginRight + 'px').show()

Answer 4

当您被迫这样做时，请使用真实表来获得所需的布局。

不使用表格进行布局的唯一必要原因是盲人的说话浏览器给出了每个表格单元格的行号和列号坐标。当表格单元格用于布局时，这会使盲读者感到困惑。

当然，使用边距，边框和填充更容易，因为它们比使用表格伪装更好地完成工作，但是当你有类似于报纸想要广告页面的布局时，它是最好使用真实表，一组嵌套表或一个充满div的表。

我会在工作时使用div或div伪造带有显示表部件的表。

当它们不起作用时，或当div布局在不同的屏幕分辨率下分崩离析时，我将使用真正的表格。它永远不会崩溃。

W3C的这个kludge可以有一个更好的解决方案，用CSS代码告诉说话浏览器不要将真实表当作表格。

我还将页面标题周围的评论表视为表格数据，即使它不是数字。表格数据可以包括分类数据。

一个想法是隐藏（使用相同的前景色和背景色）免责声明告诉盲人忽略说话浏览器提供的表格坐标，因为由于缺乏使布局工作的能力而迫使使用表格的div。

Answer 5

根据您的需要，Flexbox布局可以实现您的目标。

div.table{
  display:block;
  width:100%;
}

div.table >div{
  display:flex;
  width:100%;
  border:1px solid gray;
  flex-direction:horizonal;
}
div.table > div >div{
  display: block;
  flex-grow:1;
  border-bottom:1px solid #ddd;
  vertical-align: middle;
  height:30px;
  padding:4px;
}

参见演示：

http://jsbin.com/mimegodiba/edit?html,css,output

Answer 6

我可以通过table-row-group达到col-span

div {
    border: solid 1px;
    min-width: 10px;
    min-height: 10px;
}

.table-head {
    display: table-row;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

.table-row-group {
    display: table-row-group;
}

.table-cell-group {
    display: table-row;
}

<div style="display: table;">
  <div class="table-head">
    <div class="table-cell">h1</div>
    <div class="table-cell">h2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">c1</div>
    <div class="table-cell">c2</div>
  </div>

  <div class="table-row-group">
    <div class="table-cell-group">
      cc
    </div>
  </div>

  <div class="table-row">
    <div class="table-cell">c1</div>
    <div class="table-cell">c2</div>
  </div>

  <div class="table-row">
    <div class="table-cell">c1</div>
    <div class="table-cell"></div>
  </div>


</div>

Answer 7

如果您需要页眉和页脚行，无论列宽如何，表格标题都是个好主意... 绝对定位效果很好，除非你的文本至少比该行中的其他单元格换行一次......

所以这是一个伪解决方案，在响应表的行之间有标题，并确保根据表标题内容进行换行（如果表是动态填充的，这很重要）。我也包括了一种colspan（虽然没有准确的换行）：

CSS：

.table
{   display:table;
    position:relative;
}
.table > .header
{   display:table-caption;
    position:absolute;
    left:0;
    right:0;
}
.table > .l50{right:50%;}
.table > .r50{left:50%;}

.table > .row{display:table-row;}

.table > .row > *{display:table-cell;}

/* We add an extra cell where neededed to allow or header repositioning using % instead of fixed units */
.table > .header + .row > :last-child
{   width:1%;
    max-width:1px;
    overflow:hidden;
    visibility:hidden;
}

.table > .header + .row > :last-child > div
{   float:left;
    display:inline;
    visibility:hidden;
    width:10000%;/* 100% = parent element width (1%) ⇒ 100*100% = gran-parent element width*/
}
.table > .header + .row > :last-child > div > .l50
.table > .header + .row > :last-child > div > .r50{width:5000%;}

/* No responsive line-feed thought it's possible using % to estimate the size the span should take but it's not accurate (see HTML render) */
.table > .row > div > .span{position:absolute;left:0;right:33%;}
/* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */
.table > .row > .top
{   position:relative;
    z-index:1;
}

http://jsfiddle.net/sp2U4/

Answer 8

当我需要 colspan 时，我使用了“display: grid”，并使用 grid-template-areas 定义了列。这里有一个很好的例子：https://css-tricks.com/snippets/css/complete-guide-grid/（寻找 grid-template-areas）

Answer 9

CSS3有一个column-span attribute。但是请尝试使用flexbox或CSS网格进行布局。

table-cell - 某种colspan？

9 个答案: