第二列是後面的（固定的）第一個

我有我的HTML表中的問題...我想有一個滾動條時，我的表是太寬的頁面。我希望第一列在用戶水平滾動時保持固定。它有效，但表格的第二列出現在第一列的後面！它看起來像來自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>

來源

2017-03-03 Papple

這是它應該如何表現 – Armin

好吧，但是我怎麼獲得第二列後是固定的而不是後面？的 – Papple

可能重複：http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body的 –

解決它使用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; 
    } 
};

來源

2017-03-14 12:53:35 Papple

第二列是後面的（固定的）第一個

回答

相關問題