相关疑难解决方法(0)

我通过互联网查看了这里的问题和文章,但还没有找到满足我要求的解决方案.所以现在在2017年,是否有一种优雅的方式来实现<table>:

1. 用html + css编写(没有js)
2. 有固定的标题(不可滚动;不粘)
3. 具有可滚动性<tbody>(滚动条可能始终可见)
4. 标题和正文将正确处理调整大小并且不会使<thead>列和<tbody>列的对齐混乱
5. 不会使用嵌套表或单独的表作为标题

以下是片段:

.up {
  background-color: red;
  height: 100px;
  z-index: 100;
}
.down {
  background-color: yellow;
  height: 100px;
  width: 50%;
  margin: 0 auto;
  z-index: 1;
  transform: translateY(-50%);
}

<div class="up"></div>
<div class="down"></div>

如可以看到的,该.up元件具有较高的z-index比.down元件.但是,.down元素仍然.up以某种方式位于元素的前面.

有没有人有这个想法？如何解决这个问题？