CSS заморожен первый столбец таблицы с горизонтальной прокруткой. Свиток находится на теле HTML-страницы - PullRequest
Новая
       14

CSS заморожен первый столбец таблицы с горизонтальной прокруткой. Свиток находится на теле HTML-страницы

2 голосов
/ 19 марта 2019

Я видел бесчисленное множество решений для таблицы с замороженными столбцами, например, с возможностью прокрутки:

как мне создать таблицу HTML с фиксированным / замороженным левым столбцом и прокручиваемым телом?

но мне нужно, чтобы свиток находился на странице (теле), а не в таблице или контейнере, окружающем таблицу.

Edit - это просто базовая таблица HTML, котораяслишком большой, чтобы отображать в целом, поэтому имеет горизонтальную прокрутку.Причиной горизонтальной прокрутки в теле страницы является то, что пользователям не нужно прокручивать страницу вниз, чтобы иметь возможность горизонтальной прокрутки.

        .stickyCol2 tr th:nth-child(1),
        .stickyCol2 tr td:nth-child(1){    
          position: absolute;
          width: 50px;
          left: 15px;
          top: auto;  
          background-color: #fff;
        }

        .stickyCol2 tr th:nth-child(2),
        .stickyCol2 tr td:nth-child(2){    
          position: absolute;
          width: 60px;
          left: 86px;
          top: auto;  
          background-color: #fff;
        }
 <div class="stickyCol2">
            <table>
               <thead>
                  <tr>
                     <th>item 1</th>
                     <th>item 2</th>
                     <th>item 3</th>
                 </tr>
              </thead>
              <tbody>        
                 <tr>
                   <td>item 1</td>
                   <td>item 2</td>
                   <td>item 3</td>
                </tr>
             </tbody>
         </table>
         </div>

js fiddle https://jsfiddle.net/uthz6c24/1/

1 Ответ

0 голосов
/ 03 апреля 2019

Ниже приведен рабочий код с пояснениями, которые можно использовать для точной настройки вашего решения.

Основная идея заключается в том, что вы оборачиваете содержимое столбцов, которые вы хотите зафиксировать, внутри элементов span, которыеВы исправляете в левой части экрана (используя CSS) и задаете им ширину, равную их содержанию (в моем коде я использовал только один столбец). 

var cellWidth=$('th:first-child').width();
$('th:first-child, td:first-child').each(function() {
  $(this).wrapInner('<span></span>');
  $(this).find('span').attr('style', 'width:'+cellWidth+'px;');
})

Вы добавляете margin-left кТаблица равна общей ширине фиксированных столбцов (которую вы должны будете рассчитать, используя Javascript, если необходимо), чтобы фиксированные столбцы не перекрывали содержимое прокручиваемой ячейки. 

$('table').attr('style', 'margin-left:'+cellWidth+'px;');

После этогоИспользуя jQuery, вы можете обнаружить прокрутку тела (или для переполненного контейнера, работает так же) и применить свойство отрицательный transform:translateY к диапазонам. 

$(window).on('scroll', function() {
  var scr = -$(this).scrollTop();
  console.log(scr);
  $('th:first-child span, td:first-child span').css('transform', 'translateY(' + scr + 'px)');
})

Здесьэто рабочая скрипка, надеюсь, это даст вам первоначальный импульс.https://jsfiddle.net/scooterlord/ndxjg1b0/21/

...