HTMLテーブルの2番目の列が（固定）最初のものの後ろにあります

Question

私のHTMLテーブルに問題があります...私のテーブルがページの幅が広すぎるときにスクロールバーを作成しようとしています。ユーザーが水平方向にスクロールしている間、最初の列を固定したままにしておきたい。それは動作しますが、テーブルの2番目の列が最初の列の後ろに表示されます。それはstyle="position: fixed"プロパティから来ているようです。ここで

は、コードは次のとおりです。

<table id="coverageMatrix"> 
 
     <!-- Table Headings --> 
 
     <tr> 
 
     <th class="center" style="background: #ddd; position: fixed">ertertert</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     <th class="center " style="background: #ddd;">azeazeaze</th> 
 
     </tr> 
 
     <tr name="scenarioRaws"> 
 
     <th style="position: fixed">qsdqsd</th> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     </tr> 
 
     <tr name="scenarioRaws"> 
 
     <th style="position: fixed">qsdqsd</th> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     </tr> 
 
     <tr name="scenarioRaws"> 
 
     <th style="position: fixed">qsdqsd</th> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     <td>toto</td> 
 
     </tr> 
 
    </table>

Answer 1

はthis codepen codeを使用して、それを解決：

.fixedTable { 
    .table { 
    background-color: white; 
    width: auto; 
    tr { 
     td, th { 
     min-width: @cellWidth; 
     width: @cellWidth; 
     min-height: @cellHeight; 
     height: @cellHeight; 
     padding: @cellPadding; 
     } 
    } 
    }; 
    &-header { 
    width: (@cellWidth * @cellsWide) + (@cellPadding * 2); 
    height: @cellHeight + (@cellPadding * 2); 
    margin-left: @cellWidth + (@cellPadding * 2); 
    overflow: hidden; 
    border-bottom: 1px solid #CCC; 
    }; 
    &-sidebar { 
    width: @cellWidth + (@cellPadding * 2); 
    height: @cellHeight * @cellsHigh + (@cellPadding * 2); 
    float: left; 
    overflow: hidden; 
    border-right: 1px solid #CCC; 
    }; 
    &-body { 
    overflow: auto; 
    width: (@cellWidth * @cellsWide) + (@cellPadding * 2); 
    height: (@cellHeight * @cellsHigh) + (@cellPadding * 2); 
    float: left; 
    } 
};