スクロール可能なテーブル、CSSで最初の列がロックされている、Joomla

Question

私はこれが起こることができるいくつかの拡張があることを知っていますが、私は（可能ならば）このようにしたいです。私は "子"とnowrapコマンドでいくつかの方法を試しましたが、動作させることはできません。私はテーブルを作って、すべてが問題ありません。しかし、私はそれがモバイルデバイス上でより高度なものになり、最初の列を所定の位置にロックすることを望みます。どのようにHTMLとCSS（いいえJavascript）で行うことができます。私はCSSコードでtheme.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クラスを試してみて、あなたが得るものを見てみましょう。あなたのニーズに合わせてそこにあるスタイルをたくさん削除することができます。