Прокручиваемый стол, заблокированный первый столбец с CSS, Joomla

Question

Я знаю, что есть некоторые расширения, которые могут это сделать, но я хочу сделать это таким образом (если возможно). Я пробовал несколько методов с командой «child» и nowrap, но не могу заставить его работать. Я сделал стол, и все в порядке. Однако я хочу, чтобы он был более продвинутым на мобильных устройствах и блокировал первый столбец на месте -> все остальное должно прокручиваться влево. Как это можно сделать только с HTML и CSS (без Javascript). У меня есть theme.css с CSS-кодом, и вы создадите собственный модуль HTML-кода для страницы с самой таблицей.

.table-container{ 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; 
 
} 
 
@media screen and (min-width: 900px){ 
 
    .table-container { 
 
     overflow: visible; 
 
    } 
 
} 
 

 
.table-container body{ 
 
    padding: 1em; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    color: #222; 
 
} 
 
.table-container table{ 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    background-color: white; 
 
    width: 100%; 
 
    border: 0px solid #620376; 
 
} 
 
.table-container th, td{ 
 
    padding: 0.25em 0.75em; 
 
    text-align: left; 
 
} 
 
.table-container th{ 
 
    background-color: #000000; 
 
    white-space: nowrap; 
 
    color: white; 
 
} 
 
.table-container td{ 
 
    border-top: 1px solid #000000; 
 
} 
 
tr:nth-child(even) { 
 
    background-color: #929292; 
 
}

<div class="table-container"> 
 
    <table class="data-table"> 
 
     <thead> 
 
     <tr> 
 
      <th> </th> 
 
      <th> </th> 
 
      <th><center>Parameter S</center></th> 
 
      <th><center>Parameter S</center></th> 
 
      <th><center>Parameter S</center></th> 
 
      <th><center>Parameter S</center></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Parameter 1</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Parameter 2</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
      <tr> 
 
      <td>Parameter 3</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
      <tr> 
 
      <td>Parameter 3</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
      <tr> 
 
      <td>Parameter 4</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
         <tr> 
 
      <td>Parameter 5</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
         <tr> 
 
      <td>Parameter 6</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
         <tr> 
 
      <td>Parameter 7</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
         <tr> 
 
      <td>Parameter 8</td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
      <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
       <td><center>m2</center></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Answer 1

Это обычно называют как "замораживание" или "запирание". Быстрый поиск по SO появился how do I create an HTML table with fixed/frozen left column and scrollable body?, который должен вам помочь. Ключ составляет первую фиксированную ширину столбца и фиксирует ее абсолютную. Начните с простого тестирования класса .headcol, указанного в этом сообщении, и посмотрите, что вы получаете. Вы можете удалить много стилей, которые у него есть, в соответствии с вашими потребностями.