Без тега таблицы создайте таблицу с фиксированным заголовком и первым столбцом в случаях

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 - Я видел по всему Интернету решения, но все они используют табличный тег.