title: Without table tag create a table with fixed header and first column in cases
body: <p>I have searched all over internet but I couldn't find any table that is made without table tags with first column and header FIXED. But it's not fixed always, first column is fixed when I move to the right and it's not fixed when I move to down. 
  Also header is fixed only in case when I move down, not when I move from left to right.
  Those are my requirements.</p>
  
  <p>Could you lead me to some source where I can find more about this table and I have to mention, it needs to be responsive
  This is the code that I have so far. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="mapview"&gt;
      &lt;div id="mapview-table"&gt;
          &lt;div class="mapview-header"&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  &lt;?= __('Actions') ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="mapview-first-column"&gt;
              &lt;div class="mapview-actions mapview-row mapview-item mapview-item-content"&gt;
                  test column
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-row mapview-item mapview-item-content"&gt;
                  testColumn
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-row mapview-item mapview-item-content"&gt;
                  testColumn
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="mapview-row"&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  testRow
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  testRow
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  testRow
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  testRow
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  testRow
              &lt;/div&gt;
              &lt;div class="mapview-actions mapview-item mapview-item-content"&gt;
                  testRow
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this is obviously not good enough. 
  <a href="http://zurb.com/playground/playground/responsive-tables/index.html" rel="nofollow noreferrer">enter link description here</a> - I have seen all over internet the solutions, but they are all using table tag.</p>