时间戳

首页 > 解决方案 > css显示表的colspan不起作用

html - css显示表的colspan不起作用

问题描述

我已经厌倦了在 CSS 中修复显示表中的 colspan。

.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-row.colspan {
  display: block;
}
.table-row.colspan .table-cell {
  display: block;
  width: 200%;
  box-sizing: border-box;
}
<div class="table">
  <div class="table-row">
    <div class="table-cell">
      top left cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right cell
    </div>
    <div class="table-cell">
      top right 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 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 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 class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
    <div class="table-cell">
      bottom left cell
    </div>
    <div class="table-cell">
      bottom right cell
    </div>
  </div>
</div>

如何获取表中第二行的 colspan 行为？提前致谢。

https://codepen.io/mdshohlrana/pen/WNNxBqP

标签： htmlcss

解决方案

“colspan 行为”是什么意思？

无法colspan在 CSS und 的表格中重现 HTML 属性display: table-*，因为它是结构性的东西，而不是样式的东西。Pluscolspan需要一个 number 参数来确定要跨越的列数，而您没有。

你到底想做什么？如果要使用表格（用于表格数据），则使用 HTML table//元素tr和tdcolspan 属性。

如果您想要一个类似（页面）布局的表格，那么您应该使用可以进行类似设计的css 网格colspan。

在任何情况下，您都不应该使用很多 div 并使用诸如此类的table-row/cell类名。类名应该在语义上描述内容而不是元素的外观。

推荐阅读