html - 带有 flex 的表格布局，带有完整的问题

标签 html css flexbox

我正在用 div 和 flex 做这个表格布局，因为一些样式变得更复杂我不得不离开“真实”<table>落后，这样做。有了这个。

我的主要问题之一是 table-card , table-card__head或 table-card__body不会变成全宽来换行。我是我的例子，我让其中一行有更多的单元格。在这一点上，老实说，我不知道为什么会这样。我非常感谢您的指点。

我会放一个 fiddle以防万一

* {
  box-sizing: border-box;
}


/* plage specific */

.table-card__cell-width .table-card__head-cell,
.table-card__cell-width .table-card__cell {
  width: 11.25rem;
}


/* shared styles */

.table-card {
  position: relative;
}

.table-card__head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-card__head-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: coral;
}

.table-card__head-cell {
  border-right: 1px solid aqua;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}

.table-card__body {
  flex: 1 0 100%;
}

.table-card__row {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  background-color: white;
  border-bottom: 1px solid #cccccc;
}

.table-card__row:nth-child(odd) {
  background-color: #ededed;
}

.table-card__cell {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-right: 1px solid #cccccc;
}
<div class="table-card">
  <div class="table-card__head table-card__cell-width">
    <div class="table-card__head-row">
      <div class="table-card__head-cell">Head 1</div>
      <div class="table-card__head-cell">Head 2</div>
      <div class="table-card__head-cell">Head 3</div>
      <div class="table-card__head-cell">Head 4</div>
    </div>
  </div>

  <div class="table-card__body table-card__cell-width">
    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>

    <div class="table-card__row">
      <div class="table-card__cell">Value 1</div>
      <div class="table-card__cell">Value 2</div>
      <div class="table-card__cell">Value 3</div>
      <div class="table-card__cell">Value 4</div>
    </div>
  </div>
</div>

最佳答案

所以我确实想出了一个简单且适用于ie11的方法。 

.table-card {
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
}


* {
  box-sizing: border-box;
}

/* plage specific */
.table-card__cell-width .table-card__head-cell,
.table-card__cell-width .table-card__cell {
  width: 11.25rem;
}

/* shared styles */
.table-card {
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
}

.table-card__head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-card__head-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: coral;
}

.table-card__head-cell {
  border-right: 1px solid aqua;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}

.table-card__row {
  display: flex;
  flex-wrap: nowrap;
  background-color: white;
  border-bottom: 1px solid #cccccc;
}
.table-card__row:nth-child(odd) {
  background-color: #ededed;
}

.table-card__cell {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-right: 1px solid #cccccc;
}
<div class="wrapper">
  <div class="table-card">
    <div class="table-card__head table-card__cell-width">
      <div class="table-card__head-row">
        <div class="table-card__head-cell">Head 1</div>
        <div class="table-card__head-cell">Head 2</div>
        <div class="table-card__head-cell">Head 3</div>
        <div class="table-card__head-cell">Head 4</div>
      </div>
    </div>

    <div class="table-card__body table-card__cell-width">
      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>

      <div class="table-card__row">
        <div class="table-card__cell">Value 1</div>
        <div class="table-card__cell">Value 2</div>
        <div class="table-card__cell">Value 3</div>
        <div class="table-card__cell">Value 4</div>
      </div>
    </div>
  </div>
</div>

关于html - 带有 flex 的表格布局，带有完整的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54125750/

上一篇：css - 如何防止多轮播中的图片相互重叠？

下一篇：html - 如何创建全宽 svg 矩形背景？

相关文章：

javascript - 应用程序在键盘弹出窗口上搞砸了

JavaScript:将 Google Analytics/Yandex.Metrica 减少到推荐人和屏幕大小

css - 为什么我的媒体查询不适用于 Flexbox？

javascript - document.hidden 与 document.hasFocus() 之间的区别

html - 当我将尺寸减小到 480 像素时，我希望侧边栏向下移动，侧边栏内容使用媒体查询向上移动。？

css - 如何使弹出窗口显示在屏幕中央？

jquery - 最后一张幻灯片后的 Bootstrap 轮播高度正在改变

javascript - 使用 ng-view 和 UI Bootstrap 的 AngularJS 动画

javascript - Chakra UI 的骨架组件在 Flexbox 属性下不起作用

html - Flexbox 行左对齐

©2024 IT工具网  联系我们