Скролл вложенных в таблицу столбцов

23 марта 2021, 03:30

Есть ли возможность в рамках одной таблицы с помощью стилей и/или JS создать таблицу со вложенными столбцами, которые возможно скролить в рамках заданной области?

Пример в видео по ссылке: https://youtu.be/SB_AXIIRvbs

На видео я сделал две таблицы и наложил их друг на друга. На мой взгляд, это очень неудобный и нерациональных ход. Чуть позже я понял, что можно использовать таблицы внутри таблицы - заворачивать нужную таблицу в div и скролить её. Это тоже не очень удобно.

Answer 1

@import url(https://fonts.googleapis.com/css?family=Unica+One); 
    body { 
      background-color: gray; 
      background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.3) 50%); 
      background-size: 50px 50px;; background-color: gray; 
      background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(255,255,255,.3) 50%); 
      background-size: 50px 50px; 
    } 
    h1 { 
      font-family: 'Unica One', cursive; 
      text-align: center; 
      text-shadow: 2px 2px 2px rgba(255, 255, 255, .8); 
      margin-top: 40px; 
    } 
    a, a:hover, a:visited { 
      color: #fff; 
      display: block; 
      text-align: center; 
      text-shadow: 1px 1px 2px rgba(0,0,0,.8) 
    } 
    .container-fluid { 
      max-width: 500px; 
      margin: 20px auto; 
      border: 20px solid #efefef; 
      padding: 0; 
      background-color: #fff; 
      box-shadow: 2px 3px 5px rgba(0,0,0,.5); 
    } 
 
    /* important styles below */ 
    table { 
      width: 100%; 
    } 
    .table-wrapper { 
      overflow: hidden; 
      border-right: 1px solid #ccc; 
    } 
    .pinned { 
      width: 30%; 
      border-right: 1px solid #ccc; 
      float: left; 
    } 
    .scrollable { 
      float: right; 
      width: 69%; 
      overflow: scroll; 
      overflow-y: hidden; 
    } 
    th { 
      text-transform: uppercase; 
      line-height: 12px; 
      text-align: center; 
      overflow: hidden; 
      white-space: nowrap; 
    } 
    td { 
      text-align: center; 
      vertical-align: middle; 
      overflow: hidden; 
      height: 30px; 
      white-space: nowrap; 
    } 
    .pinned td { 
      position: relative; 
      font-weight: bold; 
      line-height: 18px; 
      text-align: left; 
      overflow: hidden; 
    } 
    .pinned td.wrap { 
      white-space: normal; 
    } 
    td .outer { 
      position: relative; 
      height: 30px; 
    } 
    td .inner { 
      overflow: hidden; 
      white-space: nowrap; 
      position: absolute; 
      width: 100%; 
    } 
    .pinned td .inner.wrap { 
      white-space: normal; 
    }

<h1>Responsive Table with Scrolling</h1> 
<div class="container-fluid"> 
  <div class="row-fluid"> 
    <div class="span12"> 
      <div class="table-wrapper"> 
        <div class="pinned"> 
          <table class="table table-striped"> 
            <thead> 
              <tr> 
                <th>&nbsp;</th> 
              </tr> 
            </thead> 
            <tbody> 
              <tr> 
                <td> 
                  Row 1 
                </td> 
              </tr> 
              <tr> 
                <td> 
                  Row 2 
                </td> 
              </tr> 
              <tr> 
                <td> 
                  <div class="outer"> 
                    <div class="inner wrap"> 
                      Row 3 longer than hp1, 2, 3, 4, 5, 6, 7.1, 7.2 
                    </div> 
                  </div> 
                </td> 
              </tr> 
              <tr> 
                <td> 
                  <div class="outer"> 
                    <div class="inner"> 
                      Row 4 longer than lotr 
                    </div> 
                  </div> 
                </td> 
              </tr> 
            </tbody> 
          </table> 
        </div> 
        <div class="scrollable"> 
          <table class="table table-striped"> 
            <thead> 
              <tr> 
                <th>Col 1</th> 
                <th>Col 2 longer</th> 
                <th>Col 3</th> 
                <th>Col 4</th> 
                <th>Col 5</th> 
                <th>Col 6</th> 
                <th>Col 7</th> 
              </tr> 
            </thead> 
            <tbody> 
              <tr> 
                <td>1,1</td> 
                <td>1,2</td> 
                <td>1,3 longer</td> 
                <td>1,4</td> 
                <td>1,5</td> 
                <td>1,6</td> 
                <td>1,7</td> 
              </tr> 
              <tr> 
                <td>2,1</td> 
                <td>2,2</td> 
                <td>2,3</td> 
                <td>2,4</td> 
                <td>2,5</td> 
                <td>2,6</td> 
                <td>2,7</td> 
              </tr> 
              <tr> 
                <td>3,1</td> 
                <td>3,2</td> 
                <td>3,3</td> 
                <td>3,4</td> 
                <td>3,5</td> 
                <td>3,6</td> 
                <td>3,7</td> 
              </tr> 
              <tr> 
                <td>4,1</td> 
                <td>4,2</td> 
                <td>4,3</td> 
                <td>4,4</td> 
                <td>4,5</td> 
                <td>4,6</td> 
                <td>4,7</td> 
              </tr> 
            </tbody> 
          </table> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>