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

我有下面这个表格，我想有滚动 水平，但我需要表的第一列和最后一列 当中间的列可滚动时要固定。有什么办法吗 要做到这一点？我想这样做没有任何插件或 javascript。我的css在html之后进一步向下。多谢各位

{{scoreHeading}}
-
-
-
-
-
-
-
-
.gameinfo-score\u详细信息{
边缘底部：5px；
.gameinfo-score\u详细信息\u div{
背景色：#999999；
颜色：#ffffff；
位置：相对位置；
.score_uu摘要名称{
@包括flex-grow（1）；
边缘顶部：5px；
边缘底部：5px；
左边距：15px；
}
.gameinfo-score\uuuu详细信息\uuuu表格-div{
背景色：#999999；
宽度：100%；
溢出-x：滚动；
左边距：100px；
溢出y：可见；
填充：0；
桌子{
边界塌陷：分离；
边界间距：0；
}
td，th{
保证金：0；
空白：nowrap；
边框顶部宽度：0px；
}
校长{
位置：绝对位置；
左：0；
}
.头部2{
位置：绝对位置；
右：0；
}
.gameinfo-score\uuuuu详细信息\uuuu表-div\uuu表{
.gameinfo-score\uuuuu详细信息\uuuuu表-div\uuuuuuu表\uuuuuu行{
边框顶部：实心1px#7373；
.gameinfo-score\uuuuuuu详细信息\uuuuuu表格\uuuuuuu行\uuuuu头{
高度：24px；
宽度：121px；
颜色：$浅灰色；
字体大小：$小字体大小；
文本对齐：居中；
背景色：#3A3A；
&：最后一个孩子{
宽度：44px；
}
}
.gameinfo-score\uuuuu详细信息\uuuuu表-div\uuuuuu表\uuuuuu行\uuuu数据{
高度：54px；
宽度：44px；
背景色：白色；
颜色：黑色；
字体大小：$font size xsmall；
文本对齐：居中；
文本转换：初始；
右边框：实心1px#7373；
边框底部：实心1px#7373；
&：第一个孩子{
宽度：121px；
}
}
}
}
}
}

---

}

以前有人问过这个问题，但下面是固定列滚动表的代码：

表格{
边界塌陷：分离；
边界间距：0；
边框顶部：1px纯色灰色；
}
td，th{
保证金：0；
边框：1px纯灰；
空白：nowrap；
边框顶部宽度：0px；
}
div{
宽度：500px；
溢出-x：滚动；
左侧边缘：5em；
溢出y：可见；
填充：0；
}
校长{
位置：绝对位置；
宽度：5em；
左：0；
顶部：自动；
边框顶部宽度：1px；
/*仅与第一行相关*/
页边顶部：-1px；
/*补偿上边框*/
}
.头部2{
位置：绝对位置；
宽度：5em；
右：0；
顶部：自动；
边框顶部宽度：1px；
/*仅与第一行相关*/
页边顶部：-1px；
/*补偿上边框*/
背景色：白色；
}
上校：以前{
内容：“行”；
}
.朗{
背景：黄色；
字母间距：1米；
}

1.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
结束
2.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
结束
3.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
结束
4.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
结束
5.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
结束
6.
QWERTYUIOPASDFGHJKLZXCVBNM
QWERTYUIOPASDFGHJKLZXCVBNM
结束

谢谢，但尽管我将此应用于我的代码，水平滚动仍然不起作用。该条显示，表中的元素溢出，但我无法滚动。我编辑了顶部的代码，以包含上面答案中给出的代码。有什么想法吗？这张表中有JS或jQuery吗？实际上我已经猜出来了。事实证明，我需要为包装器和表添加一个特定的宽度。谢谢。欢迎，如果你想，请投票给我的答案。。。

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

      }
    }
  }

}