Html 如何向 HTML5 表格添加滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17584702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 10:59:24 来源:igfitidea点击:
How to add a scrollbar to an HTML5 table?
提问by Aaron
I have an table in HTML5 that I would like to add a scrollbar to. I want the table to show ten rows and then the user can scroll down to see other songs. How can I add the scrollbar?
我有一个 HTML5 表格，我想向其中添加滚动条。我希望表格显示十行，然后用户可以向下滚动以查看其他歌曲。如何添加滚动条？
Here is my code for the table in HTML5:
这是我的 HTML5 表格代码：
<table id="my_table" table border="5">
<tr>
<th>URL</th>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
</table>
Here is my CSS code:
这是我的 CSS 代码：
#my_table {
border-radius: 20px;
background-color: transparent;
color: black;
width: 500px;
text-align: center;
}
回答by Mr_Green
If you have heading to your table columns and you don't want to scroll those headings then this solution could help you:
如果您有指向表格列的标题并且不想滚动这些标题，那么此解决方案可以帮助您：
This solution needs theadand tbodytags inside tableelement.
此解决方案需要在元素内标记thead和tbody标记table。
table.tableSection {
display: table;
width: 100%;
}
table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
table.tableSection tbody {
overflow: auto;
height: 150px;
}
table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
table.tableSection th, table.tableSection td {
width: 33%;
}
Note: If you are sure that the vertical scrollbar is always present, then you can use css3 calc property to make the thead cells align with the tbody cells.
注意：如果您确定垂直滚动条始终存在，那么您可以使用 css3 calc 属性使 thead 单元格与 tbody 单元格对齐。
table.tableSection thead {
padding-right:18px; /* 18px is approx. value of width of scroll bar */
width: calc(100% - 18px);
}
You can do the same by detecting presence of scrollbar using javascript and applying the above styles.
您可以通过使用 javascript 检测滚动条的存在并应用上述样式来执行相同的操作。
回答by Mr_Green
Instead of assuming as fixed width columns.
而不是假设为固定宽度的列。
CSS
CSS
table.tableSection {
display: table;
width: 100%;
}
table.tableSection thead,
table.tableSection tbody {
width: 100%;
}
table.tableSection thead {
overflow-y: scroll;
display: table;
table-layout: fixed;
width: calc(100% - 16px); /* assuming scrollbar width as 16px */
}
table.tableSection tbody {
overflow: auto;
height: 150px;
display: block;
}
table.tableSection tr {
width: 100%;
text-align: left;
display: table;
table-layout: fixed;
}
回答by SausageFingers
This is technique I have used on a number of occasions. It is originally based on this fiddlewith a number of modifications. It is also fluid and column widths can be fixed by adding a width style to the <th>.
这是我在许多场合使用过的技术。它最初基于此小提琴并进行了许多修改。它也是流动的，列宽可以通过向<th>.
/* this is for the main container of the table, also sets the height of the fixed header row */
.headercontainer {
position: relative;
border: 1px solid #222;
padding-top: 37px;
background: #000;
}
/* this is for the data area that is scrollable */
.tablecontainer {
overflow-y: auto;
height: 200px;
background: #fff;
}
/* remove default cell borders and ensures table width 100% of its container*/
.tablecontainer table {
border-spacing: 0;
width:100%;
}
/* add a thin border to the left of cells, but not the first */
.tablecontainer td + td {
border-left:1px solid #eee;
}
/* cell padding and bottom border */
.tablecontainer td, th {
border-bottom:1px solid #eee;
padding: 10px;
}
/* make the default header height 0 and make text invisible */
.tablecontainer th {
height: 0px;
padding-top: 0;
padding-bottom: 0;
line-height: 0;
visibility: hidden;
white-space: nowrap;
}
/* reposition the divs in the header cells and place in the blank area of the headercontainer */
.tablecontainer th div{
visibility: visible;
position: absolute;
background: #000;
color: #fff;
padding: 9px 10px;
top: 0;
margin-left: -10px;
line-height: normal;
border-left: 1px solid #222;
}
/* prevent the left border from above appearing in first div header */
th:first-child div{
border: none;
}
/* alternate colors for rows */
.tablecontainer tbody tr:nth-child(even){
background-color: #ddd;
}<div class="headercontainer">
<div class="tablecontainer">
<table>
<thead>
<tr>
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</div>Also as a JSFiddle
也作为JSFiddle
回答by Frank Conijn
A year or so has passed since the question was asked, but I wasn't satisfied with the answers. I fiddled for a while, and here is a code that:
自从提出这个问题以来已经过去了一年左右，但我对答案并不满意。我摆弄了一段时间，这是一个代码：
- works in IE8+ and all other browsers;
- is very easy to understand;
- lines up the cell borders perfectly (fixed-width cells);
- fixes the head while the body scrolls;
- automatically adapts to touch screens.
- 适用于 IE8+ 和所有其他浏览器；
- 很容易理解；
- 完美地排列单元格边框（固定宽度的单元格）；
- 身体滚动时固定头部；
- 自动适应触摸屏。
Live demo here: http://jsbin.com/bagaro/1/edit?html,output.
现场演示：http: //jsbin.com/bagaro/1/edit?html,output。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scrollabe table</title>
<!-- Substantially simplified and improved version of the table on
http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html -->
<script>
if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
document.documentElement.className += ' touchScreen';
}
</script>
<style>
/* BASICS: */
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* in case block elements are used inside table cells */
}
html {
font-size: 62.5%; /* standardizes older IEs */
}
body {
font: normal 1.3em Verdana; /* = 13px */
}
table {
border-collapse: collapse;
table-layout: fixed;
empty-cells: show;
}
td {
border: 1px solid black;
padding: 4px;
}
/* SCROLL TABLE ESSENTIALS (+ SOME ADDITIONAL CSS): */
div#scrollTableContainer {
width: 617px;
margin: 40px; /* just for presentation purposes */
border: 1px solid black;
}
.touchScreen div#scrollTableContainer {
width: 600px; /* touch devices do not form scrollbars (= 17 px wide) */
}
#tHeadContainer {
background: #CC3600;
color: white;
font-weight: bold;
}
#tBodyContainer {
height: 240px;
overflow-y: scroll;
}
.touchScreen #tBodyContainer {
-webkit-overflow-scrolling: touch; /* smooths scrolling on touch screens */
}
/* FINER LAYOUT MATTERS: */
tr:first-child td {
border-top: 0;
}
#tBody tr.lastRow td {
border-bottom: 0;
}
td:first-child {
min-width: 108px; /* Firefox needs min- and max-widths */
max-width: 108px;
border-left: 0;
}
td:first-child + td {
min-width: 125px;
max-width: 125px;
}
td:first-child + td + td {
min-width: 90px;
max-width: 90px;
}
td:first-child + td + td + td {
min-width: 95px;
max-width: 95px;
}
td:first-child + td + td + td + td {
width: 180px; /* here, Firefox messes up with only min- and max-widths */
border-right: 0;
}
/* AND SOME CSS TO INFORM TOUCH SCREEN USERS: */
p#touchDeviceText {
display: none;
}
.touchScreen p#touchDeviceText {
display: block;
}
</style>
</head>
<body>
<p id="touchDeviceText">This table is scrollable</p>
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table id="tHead">
<tr>
<td>Name</td>
<td>Operator</td>
<td>Began operation</td>
<td>Tonnage</td>
<td>Status</td>
</tr>
</table>
</div><!-- tHeadContainer -->
<div id="tBodyContainer">
<table id="tBody">
<tr>
<td>Seabourne Sun</td>
<td>Seabourn Cruise Line</td>
<td>1988</td>
<td>?</td>
<td>Ended service in 2002, currently operating as Prinsendam</td>
</tr>
<tr>
<td>Adventures of the Seas</td>
<td>Royal Caribbean International</td>
<td>2001</td>
<td>138,000</td>
<td>Operating</td>
</tr>
<tr>
<td>Oceanic Independence</td>
<td>American Hawaiian Cruises / American Global Line</td>
<td>1974</td>
<td>23,719</td>
<td>Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs</td>
</tr>
<tr>
<td>Cunard Ambassador</td>
<td>Cunard Line</td>
<td>1972</td>
<td>14,160</td>
<td>Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td>
</tr>
<tr>
<td>Aegean Beauty</td>
<td>Voyages to Antiquity</td>
<td>1973</td>
<td>11,563</td>
<td>Formerly Aegean Dolphin and Aegean I. Operating</td>
</tr>
<tr>
<td>Serenade of the Seas</td>
<td>Royal Caribbean International</td>
<td>2003</td>
<td>90,090</td>
<td>Operating</td>
</tr>
<tr>
<td>Queen Elizabeth 2</td>
<td>Cunard Line</td>
<td>1969</td>
<td>70,327</td>
<td>Left fleet in November 2008</td>
</tr>
<tr>
<td>National Geographic Endeavour</td>
<td>Lindblad Expeditions</td>
<td>1996</td>
<td></td>
<td>Operating, also known as Endeavour</td>
</tr>
<tr class="lastRow">
<td>Liberty of the Seas</td>
<td>Royal Caribbean International</td>
<td>2007</td>
<td>154,407</td>
<td>Operating</td>
</tr>
</table>
</div><!-- tBodyContainer -->
</div><!-- scrollTableContainer -->
</body>
</html>
回答by jogesh_pi
use this table into a DIV
将此表用于 DIV
<div class="tbl_container">
<table> .... </table>
</div>
.tbl_container{ overflow:auto; width: 500px;height: 200px; }
and beside this if you want to make it more beautiful and attractive use the jscollpaneto customized your scrollbar..
除此之外，如果你想让它更漂亮和有吸引力，使用jscollpane来定制你的滚动条..
回答by Matt
Using flexboxes, no javascript, and it is responsive.
使用 flexboxes，没有 javascript，它是响应式的。
/* styles */
table {
font-family: sans-serif;
border-collapse: collapse;
max-height: 300px;
overflow: auto;
}
td,
th {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
background: #fff;
}
tr:nth-child(odd) td {
background-color: #eee;
}
/* fixed headers */
table,
thead,
tbody {
display: block;
}
thead {
position: sticky;
top: 0;
}
tr {
display: flex;
}
th,
td {
flex: 1;
min-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}<h2>HTML Table</h2>
<div class=wrap>
<table>
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>ExampleReallyReallyLong</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Example Really Really Long</td>
<td>ExampleReallyReallyLong</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>回答by josef
HTML :
HTML :
<h1>↓ SCROLL ↓</h1>
<table class="blue">
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
</tbody>
</table>
<h1 class="scrollMore">↓ SCROLL MORE ↓</h1>
<table class="purple">
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
<tr>
<td>Non</td>
<td>Mais</td>
<td>Allo !</td>
</tr>
</tbody>
</table>
<h1 class="up scrollMore">↑ UP ↑</h1>
CSS:
CSS：
body{
font:1.2em normal Arial,sans-serif;
color:#34495E;
}
h1{
text-align:center;
text-transform:uppercase;
letter-spacing:-2px;
font-size:2.5em;
margin:20px 0;
}
.container{
width:90%;
margin:auto;
}
table{
border-collapse:collapse;
width:100%;
}
.blue{
border:2px solid #1ABC9C;
}
.blue thead{
background:#1ABC9C;
}
.purple{
border:2px solid #9B59B6;
}
.purple thead{
background:#9B59B6;
}
thead{
color:white;
}
th,td{
text-align:center;
padding:5px 0;
}
tbody tr:nth-child(even){
background:#ECF0F1;
}
tbody tr:hover{
background:#BDC3C7;
color:#FFFFFF;
}
.fixed{
top:0;
position:fixed;
width:auto;
display:none;
border:none;
}
.scrollMore{
margin-top:600px;
}
.up{
cursor:pointer;
}
JS (jQuery):
JS（jQuery）：
;(function($) {
$.fn.fixMe = function() {
return this.each(function() {
var $this = $(this),
$t_fixed;
function init() {
$this.wrap('<div class="container" />');
$t_fixed = $this.clone();
$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
resizeFixed();
}
function resizeFixed() {
$t_fixed.find("th").each(function(index) {
$(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
});
}
function scrollFixed() {
var offset = $(this).scrollTop(),
tableOffsetTop = $this.offset().top,
tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
if(offset < tableOffsetTop || offset > tableOffsetBottom)
$t_fixed.hide();
else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
$t_fixed.show();
}
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
init();
});
};
})(jQuery);
$(document).ready(function(){
$("table").fixMe();
$(".up").click(function() {
$('html, body').animate({
scrollTop: 0
}, 2000);
});
});
For beginner programmer: If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).
对于初学者程序员：如果您不想自己下载和托管 jQuery，您可以从 CDN（内容交付网络）中包含它。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
Adding jQuery to Your Web Pages click here.
将 jQuery 添加到您的网页单击此处。
Reference: HERE
参考：这里
回答by amoolyatatti
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scrollable Table</title>
<style type="text/css">
* { padding: 0; margin: 0; }
table.my_table {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 283px;
}
table.my_table th, table.my_table td {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
table.my_table th { background: #ffb; }
table.my_table td { background: #ffe; }
div.scrollableContainer {
height: 100px;
overflow: auto;
width: 300px;
margin: 40px;
border: 1px solid #999;
background: #ffb;
}
</style>
</head>
<body>
<div class="scrollableContainer">
<table class="my_table scrollable">
<thead>
<tr>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
<tr>
<td>http://www.youtube.com/embed/evuSpI2Genw</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
回答by user2132859
You can use a division class with the overflow attribute using the value scroll. Or you can enclose the table inside an iframe. The iframe works well with old and new IE browsers, but it may not work with other browsers and probably not with the latest IE.
您可以使用值滚动使用具有溢出属性的除法类。或者您可以将表格包含在 iframe 中。iframe 适用于新旧 IE 浏览器，但可能不适用于其他浏览器，也可能不适用于最新的 IE。
#myid { overflow-x: scroll; overflow-y: hide; width:200px; /* Or whatever the amount of pixels */ }
.myid { overflow-x: scroll; overflow-y: hide; width:200px; /* Or whatever the amount of pixels */ }
<div class="myid">
<div class="row">Content1</div>
<div class="row2">Content2</div>
</div>
<table id="myid"><tr><td>Content</td></tr></table>
回答by Pbk1303
you can try this
你可以试试这个
CSS:
CSS：
#table-wrapper {
height:150px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
color:#000;
}
#table-wrapper table thead th .text {
position:fixed;
top:0px;
height:20px;
width:35%;
border:1px solid red;
}
HTML:
HTML：
<div id="table-wrapper">
<table>
<thead>
<tr>
<th><span class="text">album</span></th>
<th><span class="text">song</span></th>
<th><span class="text">genre</span></th>
</tr>
</thead>
<tbody>
<tr> <td> album 0</td> <td> song0</td> <td> genre0</td> </tr>
<tr> <td>album 1</td> <td>song 1</td> <td> genre1</td> </tr>
<tr> <td> album2</td> <td>song 2</td> <td> genre2</td> </tr>
<tr> <td> album3</td> <td>song 3</td> <td> genre3</td> </tr>
<tr> <td> album4</td> <td>song 4</td> <td>genre 4</td> </tr>
<tr> <td> album5</td> <td>song 5</td> <td>genre 5</td> </tr>
<tr> <td>album 6</td> <td> song6</td> <td> genre6</td> </tr>
<tr> <td>album 7</td> <td> song7</td> <td> genre7</td> </tr>
<tr> <td> album8</td> <td> song8</td> <td>genre 8</td> </tr>
<tr> <td> album9</td> <td> song9</td> <td> genre9</td> </tr>
<tr> <td> album10</td> <td>song 10</td> <td> genre10</td> </tr>
<tr> <td> album11</td> <td>song 11</td> <td> genre11</td> </tr>
<tr> <td> album12</td> <td> song12</td> <td> genre12</td> </tr>
<tr> <td>album 13</td> <td> song13</td> <td> genre13</td> </tr>
<tr> <td> album14</td> <td> song14</td> <td> genre14</td> </tr>
<tr> <td> album15</td> <td> song15</td> <td> genre15</td> </tr>
<tr> <td>album 16</td> <td> song16</td> <td> genre16</td> </tr>
<tr> <td>album 17</td> <td> song17</td> <td> genre17</td> </tr>
<tr> <td> album18</td> <td> song18</td> <td> genre18</td> </tr>
<tr> <td> album19</td> <td> song19</td> <td> genre19</td> </tr>
<tr> <td> album20</td> <td> song20</td> <td> genre20</td> </tr>
</tbody>
</table>
</div>
Check this fiddle : http://jsfiddle.net/Kritika/GLKxB/1/
检查这个小提琴：http: //jsfiddle.net/Kritika/GLKxB/1/
this will keep the tablehead fixed,and scrollonly the table content.
这将保持table头部fixed，并且scroll只有table content。
