1

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

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

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

1 ответ 1

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>

1
  • Спасибо) но это тоже две таблицы. В чем польза именно вашего решения, к сожалению, я не понимаю 🙂
    – Morbius
    7 июл 2019 в 9:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.