设计响应列聚焦Div表的正确方法

Question

我想在我的网站上添加一个宽表，包括许多列，但标题很少;所有后续细胞都与它们所处的标题紧密相连。该表不适合手机浏览器的宽度。我希望桌子能在标题上分开。

我尝试了以下内容，容器div用于模拟页面宽度更改：

.container {
  border: 2px solid;
  resize: horizontal;
  overflow: auto;
  width: 150px;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  background-color: lightgrey;
  width: 100%;
  height: 100%;
}
.table {
  display: table;
  background-color: lightgrey;
}
.cell {
  display: table-cell;
  width: 100px;
}
.row {
  display: table-row;
}
.cell {
  background: red;
  color: white;
  border: 1px solid white;
}

<!-- The container is horizontally resizable, to simulate a page width change. -->
<div class='container'>
  <div class='flex-container'>
    <div class='table'>
      <div class='row'>
        <div class='cell'>Heading 1</div>
      </div>
      <div class='row'>
        <div class='table'>
          <div class='row'>
            <div class='cell'>One</div>
            <div class='cell'>Two</div>
          </div>
        </div>
      </div>
    </div>
    <div class='table'>
      <div class='row'>
        <div class='cell'>Heading 2</div>
      </div>
      <div class='row'>
        <div class='cell'>Three</div>
      </div>
    </div>
  </div>
</div>

这是实现这一目标的正确方法吗？是否有更好的方法或惯例可以坚持？