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

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>

希望对你有帮助。