2015-06-29 145 views
0

任何人都知道該怎麼做垂直的身體滾動,如果表是這樣的:垂直滾動瀏覽表

.scroll { 
 
    overflow-y: scroll; 
 
    height:200px; 
 
}
<div class="scroll"> 
 
<table> 
 
    <thead> 
 
     <tr> 
 
      <th rowspan="2">Head 1</th> 
 
      <th colspan="2">Head 2</th> 
 
      <th colspan="3">Head 3</th> 
 
     </tr> 
 
     <tr> 
 
      <th>Head 4</th> 
 
      <th>Head 5</th> 
 
      <th>Head 6</th> 
 
      <th>Head 7</th> 
 
      <th>Head 8</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Content 1</td> 
 
      <td>Content 2</td> 
 
      <td>Content 3</td> 
 
      <td>Content 4</td> 
 
      <td>Content 5</td> 
 
      <td>Content 6</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
</div>

我發現很多的解決方案和jQuery插件,但他們都對線性表頭或者沒有運行其中一種瀏覽器(Firefox,Chrome,IE)。

+0

它在垂直滾動已。你到底想要什麼? –

+0

我只想要表格身體滾動,沒有標題。 – LittleHobbit

+0

你的意思是,你希望標題部分是靜止的,並且只是在滾動桌面太長的情況下滾動的主體! – Greenhorn

回答

0

使用這個插件:jQuery Plugin for Fixed Header Tables

$(function() { 
 
    $("table").fixedHeaderTable({ 
 
    footer: true, 
 
    cloneHeadToFoot: true, 
 
    fixedColumn: false, 
 
    height: 100 
 
    }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://www.fixedheadertable.com/js/jquery.fixedheadertable.js"></script> 
 

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="2">Head 1</th> 
 
     <th colspan="2">Head 2</th> 
 
     <th colspan="3">Head 3</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Head 4</th> 
 
     <th>Head 5</th> 
 
     <th>Head 6</th> 
 
     <th>Head 7</th> 
 
     <th>Head 8</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
     <td>Content 6</td> 
 
    </tr> 
 
    </tbody> 
 
</table>