Css 表格单元格-某种colspan？

我现在有点困惑，因为我有CSS代码可以工作，但它一点也不漂亮。我现在想修改这个CSS样式，并通过更少的代码构建它们。我在

显示：表格方面有很大的问题/
显示：表格行和
显示：表格单元格

例如，我有以下代码：

如何使最后一个单元格（中间）不向右移动上面的第二个单元格？最后一个单元格的宽度应与上面两个单元格的宽度相同。需要某种colspan。这太奇怪了，因为我觉得在我重新编写代码之前它就已经工作了。但是现在右边的所有元素都被完全移动了。
CSS没有
colspan
analog。根据您的示例，您可以将最后一行标记为一个单独的块

您还可以将
display:table caption
与
caption side:bottom
结合使用，将表格行显示为跨越所有列的最后一行。请参阅。
一个想法是利用绝对定位。将包装器相对放置在桌子周围，然后所有绝对位置都以包装器为坐标中心。见下文。注意，我定义了一个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>


第1栏
第2栏
显示为colspan=2
（此处仅用于在下一个表行之前强制换行）
第1栏
第2栏
如果您需要页眉和页脚行，而不考虑列宽，则表格标题是一个好主意。。。
绝对定位非常有效，除非您的文本比该行中的其他单元格至少换行一次

因此，这里有一个伪解决方案，可以在响应表的行之间设置标题，并确保根据表标题内容进行换行（如果表是动态填充的，这一点很重要）。我还包括了一种colspan（虽然不是精确的线喂）：

CSS:

我找到了一个使用jquery和
表布局的解决方案：修复了
。这是我的小提琴：

HTML:

JS:

当您被迫这样做以获得所需的布局时，请使用实际表格

不使用表格进行布局的唯一必要原因是盲人语音浏览器会给出每个表格单元的行号和列号坐标。当表格单元格用于布局时，这会混淆盲读卡器

当然，使用边距、边框和填充比用表格伪造边距、边框和填充要容易得多，但是当你有类似于报纸招聘广告页面的布局时，最好使用一个真实的表格、一组嵌套的表格或一个充满div的表格

我将始终使用div或div在工作时伪造带有显示表部件的表

当它们不工作时，或者当div布局在不同的屏幕分辨率下崩溃时，我将使用一个真正的表。它从不解体

W3C的这一拙劣做法本可以有一个更好的解决方案，即使用CSS代码告诉会说话的浏览器不要将真实的表视为表

我还将围绕页面标题排列的注释表视为表格数据，即使它不是数字。表格数据可以包括分类数据

一种方法是隐藏（使用相同的前景色和背景色）一条免责声明，告知盲人忽略会说话的浏览器提供的表格坐标，因为表格的使用是由于无法使布局与div一起工作而被迫的。
根据您的需要，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;
}

请参见演示：

CSS3有一个。但请尝试使用flexbox或css网格进行布局。
我可以通过表格行组实现列跨度


div{
边框：实心1px；
最小宽度：10px；
最小高度：10px；
}
.桌头{
显示：表格行；
}
.表格行{
显示：表格行；
}
.表格单元格{
显示：表格单元格；
}
.表格行组{
显示：表格行组；
}
.表格单元格组{
显示：表格行；
}

h1
氢
c1
c2
复写的副本
c1
c2
c1
当我需要colspan时，我使用了“display:grid”，并使用网格模板区域定义了列。
这里有一个很好的例子：（寻找网格模板区域）
这不是滥用CSS吗？是的。每个人都在谈论如何将表格用于非表格数据是表格滥用。好的，我想声明一点，我认为对非表格标题使用
display:table caption
是CSS滥用。
display:table caption
（以及
display:table footer group/table header group
）对于更改块的垂直顺序非常有用。每个功能都有自己的适用性。注意：
display:table caption
始终在底部显示该行，而不管“table”中的顺序如何。参见修改后的示例：请将代码从小提琴添加到您的答案中。很遗憾，答案的可能重复项的可能重复项不起作用。如果将示例中的
cc
更改为更长的值，您将看到它仍然完全保留在第一列中。
<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>

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

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

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