スクロール可能なテーブル、フリーズされた最初の列、CSS、Joomla

Question

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

私はおそらくちょうど2つのserpateのテーブルをお勧めします。

最初のテーブルでは、移動しないように設定するだけです。

2番目のテーブルをスクロール可能にします。

<table class="New Table for header only"> 
<th colspan="# of columns">Table</th> 
<td>Ranger Rover</td> 
<td>Mercedes</td> 
<td>toyota</td> 
</table> 

次に、ヘッダーが添付されていない別のテーブルのデータを組み込みます。

これは正しく動作するはずですか？私がその質問を誤解しない限り。