如何使表滾動水平與固定的第一和最後一列

Question

我有此表下面，我想有滾動 水平，但我不想被固定的，而列表都 的第一個和最後一個欄在兩者之間是可滾動的。有關 如何完成此任何想法？我想做這個沒有任何插件或 JavaScript。我的CSS進一步下來後的HTML。謝謝。

<div class="gameinfo-score__details"> 
      <div class="gameinfo-score__details_div"> 
       <div class="gameinfo-score__details__table-div"> 
        <table class="gameinfo-score__details__table-div__table"> 
         <tr class="gameinfo-score__details__table-div__table__row"> 
          <th class="gameinfo-score__details__table-div__table__row__head headcol"> 
          </th> 
          <td class="gameinfo-score__details__table-div__table__row__head" 
           ng-repeat="scoreHeading in scoreColumns"> 
           {{scoreHeading}} 
          </td> 
          <td class="gameinfo-score__details__table-div__table__row__head"> 
           - 
          </td> 
          <td class="gameinfo-score__details__table-div__table__row__head headcol2"> 
           - 
          </td> 
         </tr> 
         <tr class="gameinfo-score__details__table-div__table__row"> 
          <th class="gameinfo-score__details__table-div__table__row__data headcol"> 
           <img class="profile-pic" alt="Profile Picture" height="50" width="100"> 
          </th> 
          <td class="gameinfo-score__details__table-div__table__row__data" 
           ng-repeat="scoreHeading in scoreColumns"> 
           - 
          </td> 
          <td class="gameinfo-score__details__table-div__table__row__data">-</td> 
          <td class="gameinfo-score__details__table-div__table__row__data headcol2">-</td> 
         </tr> 
         <tr class="gameinfo-score__details__table-div__table__row"> 
          <th class="gameinfo-score__details__table-div__table__row__data headcol"> 
           <img class="profile-pic" alt="Profile Picture" height="50" width="100"> 
          </th> 
          <td class="gameinfo-score__details__table-div__table__row__data" 
           ng-repeat="scoreHeading in scoreColumns"> 
           - 
          </td> 
          <td class="gameinfo-score__details__table-div__table__row__data">-</td> 
          <td class="gameinfo-score__details__table-div__table__row__data headcol2">-</td> 
         </tr> 
        </table> 
       </div> 
      </div> 
     </div> 



.gameinfo-score__details{ 

margin-bottom: 5px; 

.gameinfo-score__details_div { 
    background-color: #999999; 
    color: #ffffff; 
    position: relative; 

    .score__summary-name { 
    @include flex-grow(1); 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left: 15px; 
    } 

    .gameinfo-score__details__table-div { 
    background-color: #999999; 
    width: 100%; 
    overflow-x: scroll; 
    margin-left: 100px; 
    overflow-y: visible; 
    padding: 0; 

    table { 
     border-collapse: separate; 
     border-spacing: 0; 
    } 

    td, th { 
     margin: 0; 
     white-space: nowrap; 
     border-top-width: 0px; 
    } 

    .headcol { 
     position: absolute; 
     left: 0; 
    } 

    .headcol2 { 
     position: absolute; 
     right: 0; 
    } 

    .gameinfo-score__details__table-div__table { 

     .gameinfo-score__details__table-div__table__row { 
     border-top: solid 1px #737373; 

     .gameinfo-score__details__table-div__table__row__head { 
      height: 24px; 
      width: 121px; 
      color: $gray-lighter; 
      font-size: $font-size-small; 
      text-align: center; 
      background-color: #3a3a3a; 

      &:last-child { 
      width: 44px; 
      } 
     } 

     .gameinfo-score__details__table-div__table__row__data { 
      height: 54px; 
      width: 44px; 
      background-color: white; 
      color: black; 
      font-size: $font-size-xsmall; 
      text-align: center; 
      text-transform: initial; 
      border-right: solid 1px #737373; 
      border-bottom: solid 1px #737373; 

      &:first-child { 
      width: 121px; 
      } 
     } 

     } 
    } 
    } 

} 

}

Answer 1

這個問題已經被問過，但這裏是有固定列滾動表的代碼：

table { 
 
    border-collapse: separate; 
 
    border-spacing: 0; 
 
    border-top: 1px solid grey; 
 
} 
 

 
td, th { 
 
    margin: 0; 
 
    border: 1px solid grey; 
 
    white-space: nowrap; 
 
    border-top-width: 0px; 
 
} 
 

 
div { 
 
    width: 500px; 
 
    overflow-x: scroll; 
 
    margin-left: 5em; 
 
    overflow-y: visible; 
 
    padding: 0; 
 
} 
 

 
.headcol { 
 
    position: absolute; 
 
    width: 5em; 
 
    left: 0; 
 
    top: auto; 
 
    border-top-width: 1px; 
 
    /*only relevant for first row*/ 
 
    margin-top: -1px; 
 
    /*compensate for top border*/ 
 
} 
 

 
.headcol2 { 
 
    position: absolute; 
 
    width: 5em; 
 
    right: 0; 
 
    top: auto; 
 
    border-top-width: 1px; 
 
    /*only relevant for first row*/ 
 
    margin-top: -1px; 
 
    /*compensate for top border*/ 
 
    background-color: white; 
 
} 
 

 
.headcol:before { 
 
    content: 'Row '; 
 
} 
 

 
.long { 
 
    background: yellow; 
 
    letter-spacing: 1em; 
 
}

<div> 
 
<table> 
 
     <tr><th class="headcol">1</th> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="headcol2">END</td></tr> 
 
     <tr><th class="headcol">2</th> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="headcol2">END</td></tr> 
 
     <tr><th class="headcol">3</th> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="headcol2">END</td></tr> 
 
     <tr><th class="headcol">4</th> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="headcol2">END</td></tr> 
 
     <tr><th class="headcol">5</th> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="headcol2">END</td></tr> 
 
     <tr><th class="headcol">6</th> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
 
     <td class="headcol2">END</td> 
 
     </tr> 
 
</table> 
 
</div>

希望它可以幫助。