如何显示表行的行为像colspan = 3 [英] How can display table-row behave like colspan=3

问题描述

我需要两行，第一行有3列，第二行我需要跨越所有宽度，就像 td colspan = 3 那样

I need two rows, the first one have 3 columns and the second I need to span all the width just like the td colspan=3 would do

或显示：表格单元格；行为就像colspan = 3

Or display: table-cell; behave like colspan=3

我正在使用 display：table-row;宽度：100％；

这怎么办？

这是我的CSS：

<style>
      .boxer {
         display: table;
         border-collapse: collapse;
      }
      .boxer .box-row {
         display: table-row;
      }
      .boxer .box-row-search {
         display: table-row;
         width: 100%;
      }
      .boxer .box {
         display: table-cell;
         text-align: left;
         vertical-align: top;
         border: 1px solid black;
      }
</style>

推荐答案

使用 display：table; 它无法完成（可悲的是，没有 colspan：3; 或 rowspan 属性在CSS中，因此样式表无法模仿真实的< table> 元素）

Using display: table; it cannot be done (cause sadly there's no colspan: 3; or rowspan property in CSS, therefore stylesheet is unable to mimick a real <table> element)

但嘿， flex 来营救！

but hey, flex to the rescue!

.row{
  display: flex;
  flex-flow: wrap;
}
.cell{
  width: 25%;
  background:#eee;
}
.colspan2{
  flex: 2;
}

<div class="row">
  <div class="cell">Cell1</div>
  <div class="cell">Cell2</div>
  <div class="cell">Cell3</div>
  <div class="cell">Cell4</div>
  <div class="cell">Cell5</div>
  <div class="cell colspan2">Cell6 Colspan2</div>
  <div class="cell">Cell7</div>
</div>

这篇关于如何显示表行的行为像colspan = 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！