javascript - 允许在 tbody 内水平和垂直滚动表格

Question

我遇到了一个问题，我的表格对于我的 div 来说太大了，所以我试图缩小它。我真的需要在表格上激活水平滚动，这样我就可以滚动查看所有表格行，我还需要 tbody 垂直滚动，这样我可以在看到表格的同时看到所有列标题行...如果这是有道理的。

我很想得到一点帮助，但我不确定如何完美地获得它。

.stats-table {
  max-width: 391px;
  overflow-x: scroll;
}
td,
a {
  font-size: 12px;
}
/* I'd like to be able to scroll within the tbody, and scroll x for the entire table...
tbody {
	overflow-y: scroll;
    display: block;
	max-height: 100px !important;  
}
*/

<div class="stats-table" id="stats-table1">
  <table cellspacing="0" cellpadding="0" width="100%" class="data-table1 recentGames">
    <thead>
      <tr class="player-table-header">
        <td colspan="20">
          <span style="float:left">Recent Games</span>
        </td>
      </tr>
      <tr class="player-table-key two-row-top td">
        <td class="first-td ">WK</td>
        <td>OPP</td>
        <td colspan="2">RESULT</td>
        <td class="" colspan="10">Passing</td>
        <td class="" colspan="4">Rushing</td>
        <td class="last-td" colspan="2">Fumbles</td>
      </tr>
      <tr class="player-table-key two-row-bot td">
        <td colspan="4" class="first-td "></td>
        <td class=" }">Comp</td>
        <td class=" }">Att</td>
        <td class=" }">Pct</td>
        <td class=" }">Yds</td>
        <td class=" }">Avg</td>
        <td class=" }">TD</td>
        <td class=" }">Int</td>
        <td class=" }">Sck</td>
        <td class=" }">SckY</td>
        <td class=" }">Rate</td>
        <td class=" }">Att</td>
        <td class=" }">Yds</td>
        <td class=" }">Avg</td>
        <td class=" }">TD</td>
        <td class=" }">FUM</td>
        <td class="last-td }">Lost</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          <a href="/gamecenter/2015081353/2015/PRE1/packers@patriots/watch" class="NELink"></a>
          <a href="/teams/profile?team=GB" class="NELink">
														GB
														</a>
        </td>
        <td colspan="2">
          <span>L</span>
          &nbsp;
          <a href="/gamecenter/2015081353/2015/PRE1/packers@patriots" class="NELink">11-22</a>
        </td>
        <td>1</td>
        <td>4</td>
        <td>25.0</td>
        <td>10</td>
        <td>2.5</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>39.6</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
      </tr>
      <tr>
        <td colspan="20" class="border-td"></td>
      </tr>
      <tr>
        <td>2</td>
        <td>
          <a href="/gamecenter/2015082254/2015/PRE2/patriots@saints/watch" class="NELink"></a>
          <a href="/teams/profile?team=NO" class="NELink">
														@NO
														</a>
        </td>
        <td colspan="2">
          <span>W</span>
          &nbsp;
          <a href="/gamecenter/2015082254/2015/PRE2/patriots@saints" class="NELink">26-24</a>
        </td>
        <td>2</td>
        <td>5</td>
        <td>40.0</td>
        <td>13</td>
        <td>2.6</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>47.9</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
      </tr>
      <tr>
        <td colspan="20" class="border-td"></td>
      </tr>
      <tr>
        <td>3</td>
        <td>
          <a href="/gamecenter/2015082851/2015/PRE3/patriots@panthers/watch" class="NELink"></a>
          <a href="/teams/profile?team=CAR" class="NELink">
														@CAR
														</a>
        </td>
        <td colspan="2">
          <span>W</span>
          &nbsp;
          <a href="/gamecenter/2015082851/2015/PRE3/patriots@panthers" class="NELink">17-16</a>
        </td>
        <td>7</td>
        <td>13</td>
        <td>53.8</td>
        <td>84</td>
        <td>6.5</td>
        <td>1</td>
        <td>2</td>
        <td>1</td>
        <td>8</td>
        <td>59.9</td>
        <td>2</td>
        <td>18</td>
        <td>9.0</td>
        <td>0</td>
        <td>--</td>
        <td>--</td>
      </tr>
      <tr>
        <td colspan="20" class="border-td"></td>
      </tr>
      <tr>
        <td colspan="20">&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>

有什么想法吗？谢谢。

Answer 1

看起来水平滚动在 JSFiddle 中有效。或者您是否正在尝试通过水平滚动做一些更具体的事情？

http://jsfiddle.net/ss5mzL86/

<div class="stats-table" id="stats-table1">
  <table cellspacing="0" cellpadding="0" width="100%" class="data-table1 recentGames">
    <thead>
      <tr class="player-table-header">
        <td colspan="20">
      <span style="float:left">Recent Games</span>
        </td>
      </tr>
      <tr class="player-table-key two-row-top td">
        <td class="first-td ">WK</td>
        <td>OPP</td>
        <td colspan="2">RESULT</td>
        <td class="" colspan="10">Passing</td>
        <td class="" colspan="4">Rushing</td>
        <td class="last-td" colspan="2">Fumbles</td>
      </tr>
      <tr class="player-table-key two-row-bot td">
    <td colspan="4" class="first-td "></td>
    <td class=" }">Comp</td>
    <td class=" }">Att</td>
    <td class=" }">Pct</td>
    <td class=" }">Yds</td>
    <td class=" }">Avg</td>
    <td class=" }">TD</td>
    <td class=" }">Int</td>
    <td class=" }">Sck</td>
    <td class=" }">SckY</td>
    <td class=" }">Rate</td>
    <td class=" }">Att</td>
    <td class=" }">Yds</td>
    <td class=" }">Avg</td>
    <td class=" }">TD</td>
    <td class=" }">FUM</td>
    <td class="last-td }">Lost</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>
      <a href="/gamecenter/2015081353/2015/PRE1/packers@patriots/watch" class="NELink"></a>
      <a href="/teams/profile?team=GB" class="NELink">
                                                    GB
                                                    </a>
    </td>
    <td colspan="2">
      <span>L</span>
      &nbsp;
      <a href="/gamecenter/2015081353/2015/PRE1/packers@patriots" class="NELink">11-22</a>
    </td>
    <td>1</td>
    <td>4</td>
    <td>25.0</td>
    <td>10</td>
    <td>2.5</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>39.6</td>
    <td>--</td>
    <td>--</td>
    <td>--</td>
    <td>--</td>
    <td>--</td>
    <td>--</td>
  </tr>
  <tr>
    <td colspan="20" class="border-td"></td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <a href="/gamecenter/2015082254/2015/PRE2/patriots@saints/watch" class="NELink"></a>
      <a href="/teams/profile?team=NO" class="NELink">
                                                    @NO
                                                    </a>
    </td>
    <td colspan="2">
      <span>W</span>
      &nbsp;
      <a href="/gamecenter/2015082254/2015/PRE2/patriots@saints" class="NELink">26-24</a>
    </td>
    <td>2</td>
    <td>5</td>
    <td>40.0</td>
    <td>13</td>
    <td>2.6</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>47.9</td>
    <td>--</td>
    <td>--</td>
    <td>--</td>
    <td>--</td>
    <td>--</td>
    <td>--</td>
  </tr>
  <tr>
    <td colspan="20" class="border-td"></td>
  </tr>
  <tr>
    <td>3</td>
    <td>
      <a href="/gamecenter/2015082851/2015/PRE3/patriots@panthers/watch" class="NELink"></a>
      <a href="/teams/profile?team=CAR" class="NELink">
                                                    @CAR
                                                    </a>
    </td>
    <td colspan="2">
      <span>W</span>
      &nbsp;
      <a href="/gamecenter/2015082851/2015/PRE3/patriots@panthers" class="NELink">17-16</a>
    </td>
    <td>7</td>
    <td>13</td>
    <td>53.8</td>
    <td>84</td>
    <td>6.5</td>
    <td>1</td>
    <td>2</td>
    <td>1</td>
    <td>8</td>
    <td>59.9</td>
    <td>2</td>
    <td>18</td>
    <td>9.0</td>
    <td>0</td>
    <td>--</td>
    <td>--</td>
  </tr>
  <tr>
    <td colspan="20" class="border-td"></td>
  </tr>
  <tr>
    <td colspan="20">&nbsp;</td>
  </tr>
</tbody>