Question

我正在使用display:table;创建一个表，我希望奇数行具有4 columns，而偶数行仅具有1 column，其跨越{{ 1}}。这可能吗？

width

.table {
  display:table;
  table-layout:fixed;
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
}
  .table-row {
    display:table-row;
    border:1px solid #000;
  }
    .cell {
      display:table-cell;
      padding:10px 0;
    }
      .table-row:nth-child(odd) .cell {
        width:25%;
      }
      /* BELOW DOESN'T WORK */
      .table-row:nth-child(even) .cell {
        width:100%;
      }

我知道通过使用标准的<div class="table"> <div class="table-row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> </div> <div class="table-row"> <div class="cell">1</div> </div> <div class="table-row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> </div> <div class="table-row"> <div class="cell">1</div> </div> <div class="table-row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> </div> <div class="table-row"> <div class="cell">1</div> </div> <div class="table-row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> </div> <div class="table-row"> <div class="cell">1</div> </div> </div>，我可以使用table完成此操作，但是我似乎找不到等效的CSS，而且我没有能力修改HTML结构。

Answer 1

不幸的是，CSS表还没有等效于colspan / rowspan属性，因此不可能在CSS表中合并单元格。

鉴于您需要具有重复的单元格宽度模式的固定布局，因此建议您使用Flexbox而不是CSS表，如下所示：

.table { /* no special styles needed */ }
  .table-row {
    display: flex;
    border:1px solid #000;
  }
  .table-row:not(:first-child) {
    border-top: none; /* make inner borders thin */
  }
    .cell {
      flex: 1 0 0; /* this divides the row width equally between cells */
      padding:10px 0;
    }

<div class="table">
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>
  <div class="table-row">
    <div class="cell">1</div>
  </div>
</div>

Div表交替排列4格和1格

1 个答案: