使用Div的特定表格

Question

我想使用Div创建一个特定的表格，我想实现一个带滚动功能的固定标题...

我想在scroll-y添加.body ...并在需要时向整个牌桌添加scroll-x ...

JSFiddle

＆＃13;

＆＃13;

.grid {
  background-color: yellow;
  width: 200px;
  overflow-x: scroll;
}
.grid .grid-wrap {
  width: 500px;
  background-color: #e54949;
}
.table {
  width: 100%;
}
.table .header {
  background-color: green;
}
.table .header .cell {
  display: inline-block;
  width: 100px;
}
.table .body {
  overflow-y: scroll;
  height: 100px;
}
.table .body .cell {
  display: inline-block;
  width: 100px;
}

＆＃13;

<div class="grid">
  <div class="grid-wrap">
    <div class="table">
      <div class="header">
        <div class="row">
          <div class="cell">Colonne #1</div>
          <div class="cell">Colonne #2</div>
          <div class="cell">Colonne #3</div>
          <div class="cell">Colonne #4</div>
        </div>
      </div>
      <div class="body">
        <div class="row">
          <div class="cell">Ligne #1</div>
          <div class="cell">Ligne #1</div>
          <div class="cell">Ligne #1</div>
          <div class="cell">Ligne #1</div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;