有没有办法让内部 CSS 表格扩展外部 CSS 表格的整个宽度？答案

【问题标题】：Is there a way to have an inner CSS table expand the full width of an outer CSS table?有没有办法让内部 CSS 表格扩展外部 CSS 表格的整个宽度？
【发布时间】：2020-09-18 15:23:45
【问题描述】：

我使用 CSS display: table、display: table-row 和 display: table-cell 方法构建了一个表格。但是，当我尝试使用该表中的表时，对于较大数据中的较小数据子部分，我无法让内表扩展其父表的整个宽度。

<div class="table clearfix">
  <div class="head">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>
  <div class="row">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>
  <div class="inner-row">
    <div class="inner-row-container">
      <div class="table clearfix">
        <div class="head">
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
        </div>
        <div class="row">
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>  
</div>

https://codepen.io/hitokage/pen/qBZJbpG

我知道 CSS 表不存在 colspan 之类的东西，我尝试的任何方法都导致失败。由于代码循环，我无法在内表之前关闭父表。

【问题讨论】：

既然可以使用table 元素，为什么还要使用CSS 表格？只要您将它用于桌面，使用它们应该没问题（即使在 html5 中）
我们在表格中执行的其他项目有时对表格元素非常令人沮丧，并且正在研究其他可能性。 display: table table 完美地满足了我们的需求，除了这个奇怪的、令人沮丧的问题。

标签： html css css-tables

【解决方案1】：

缺少 colspan/rowspan 只是 display:table 的限制之一。另一种可能的方法是使用 flexbox 来伪造您的表格，这样可以在页面响应时获得额外的控制。

.table {
    width: 100%;
  
}
.table .head, .table .row {
  display:flex;

}
.table .head, .table .row {
  border-bottom: 1px solid black;
}

.table .inner-row {
  padding: 20px;
  background:#cfcfcf;
}

.table .inner-row .table {
  border:1px solid black;
}

.table .inner-row .table .row {
  border-bottom: none;
}

.cell {
  flex-basis: 33%;
}

<div class="table clearfix">
  <div class="head">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>
  <div class="row">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>
  <div class="inner-row">
    <div class="inner-row-container">
      <div class="table clearfix">
        <div class="head">
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
        </div>
        <div class="row">
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>  
</div>

【讨论】：