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

时间：2015-08-31 18:41:20

标签： javascript html css

我有一个问题，我的桌子对我的div来说太大了，所以我试图缩小它。我真的需要一个水平滚动才能在它自己的桌子上激活，这样我就可以滚动查看所有表格行，我还需要tbody垂直滚动，这样我才能看到所有列，同时能够看到表格标题行...如果这有意义。

我喜欢一些帮助，我不确定如何完美地完成它。

＆＃13;
＆＃13; 
.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;  
}
*/
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

有什么想法？感谢。

1 个答案:

答案 0 :(得分：0)

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

相关问题
最新问题