Wie Tisch blättert horizontal mit festen ersten und letzten Spalten

Question

Ich habe diese Tabelle unten, das machen, wir scrollbaren horizontal haben möchten, aber ich mag sowohl die erste und die letzte Spalte der Tabelle während Spalten festgelegt werden dazwischen sind scrollbar. Irgendwelche Ideen, wie dies zu erreichen? Ich möchte dies ohne Plugins oder Javascript tun. Mein CSS weiter unten nach dem HTML. Vielen Dank.

<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

Diese Frage vor gefragt wurde, aber hier ist der Code für eine Scroll-Tabelle mit festen Spalten:

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>

Hoffe, es hilft .