Question

我已经在互联网上搜索过但我找不到任何没有第一列和标题FIXED的表格标签的表格。但它总是不固定，当我向右移动时，第一列是固定的，当我向下移动时它不固定。标题仅在我向下移动时固定，而不是在我从左向右移动时固定。这些是我的要求。

你能带我到一些我可以找到更多关于这张桌子的来源，我必须提一下，它需要有回应这是我到目前为止的代码。

#mapview{
  overflow: scroll;
  position: relative;
  opacity: 1;
  width: 100%;
  left: 0px;
  height: 216px;
}
#mapview-table {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 5;
}
.mapview-header {
  background-color: #1cc7ff;
  position: absolute;
  top: 35px;
  z-index: 50;
}
.mapview-first-column {
  background-color: #2a6496;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.mapview-actions{
  min-width: 250px;
  min-height: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mapview">
    <div id="mapview-table">
        <div class="mapview-header">
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                <?= __('Actions') ?>
            </div>
        </div>
        <div class="mapview-first-column">
            <div class="mapview-actions mapview-row mapview-item mapview-item-content">
                test column
            </div>
            <div class="mapview-actions mapview-row mapview-item mapview-item-content">
                testColumn
            </div>
            <div class="mapview-actions mapview-row mapview-item mapview-item-content">
                testColumn
            </div>
        </div>
        <div class="mapview-row">
            <div class="mapview-actions mapview-item mapview-item-content">
                testRow
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                testRow
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                testRow
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                testRow
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                testRow
            </div>
            <div class="mapview-actions mapview-item mapview-item-content">
                testRow
            </div>
        </div>
    </div>
</div>

但这显然不够好。 enter link description here - 我已经在互联网上看到了解决方案，但他们都在使用表格标签。

Answer 1

我认为您可以使用position: fixed;根据需要调整您的div。这里有一个代码示例：https://jsfiddle.net/josegallom/hojL98do/4/

如果没有表标记，则创建一个具有固定标题和第一列的表

1 个答案: