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

Allow scrolling on table horizontally and vertically within tbody

本文关键字:垂直 滚动 水平 表格      更新时间:2023-09-26

我有一个问题,我的表太大,我的div,所以我试图缩小它。我真的需要一个水平滚动在表上激活它自己,这样我就可以滚动看到所有的表行,我还需要body垂直滚动,这样我就可以看到所有的列,同时能够看到表标题行…如果这说得通的话。

我希望你能帮我一点忙,我不知道怎样才能做得完美。

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

任何想法吗?谢谢。

看起来水平滚动在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>