如何使用固定的第一列和最后一列水平制作表格滚动

Question

我在下面有我想滚动的表 水平，但我想要表的第一列和最后一列 在两者之间的列时要修复。关于如何的任何想法 做到这一点？我想在没有任何插件或 JavaScript。HTML之后，我的CSS更远。谢谢。

<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>

希望它有帮助。