我有一个 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>
这是我的 CSS 代码：
#my_table {
border-radius: 20px;
background-color: transparent;
color: black;
width: 500px;
text-align: center;
}
如果您有标题到您的表格列并且您不想滚动这些标题，那么此解决方案可以帮助您：
此解决方案需要在元素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%;
}
注意：如果您确定垂直滚动条始终存在，那么您可以使用 css3 calc 属性使 thead 单元格与 tbody 单元格对齐。
table.tableSection thead {
padding-right:18px; /* 18px is approx. value of width of scroll bar */
width: calc(100% - 18px);
}
您可以通过使用 javascript 检测滚动条的存在并应用上述样式来执行相同的操作。
而不是假设为固定宽度的列。
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;
}
这是我在很多场合都使用过的技术。它最初是基于这个小提琴进行了一些修改。它也是流动的，列宽可以通过向<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>也作为一个JSFiddle
自提出问题以来已经过去了一年左右，但我对答案并不满意。我摆弄了一会儿，这是一个代码：
现场演示：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>
将此表用于 DIV
<div class="tbl_container">
<table> .... </table>
</div>
.tbl_container{ overflow:auto; width: 500px;height: 200px; }
除此之外，如果您想让它更漂亮和有吸引力，请使用jscollpane自定义您的滚动条..
使用 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>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：
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）：
;(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);
});
});
对于初学者程序员：如果您不想自己下载和托管 jQuery，您可以从 CDN（内容交付网络）中包含它。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
将 jQuery 添加到您的网页单击此处。
参考：这里
您可以使用带有值滚动的溢出属性的除法类。或者您可以将表格包含在 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>
<!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>
你可以试试这个
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：
<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>
检查这个小提琴：http: //jsfiddle.net/Kritika/GLKxB/1/
这将保持table头部fixed，并且scroll只有table content。
@jogesh_pi 答案是一个很好的解决方案，我在这里创建了一个示例http://jsfiddle.net/pqgaS/5/，检查一下，希望对您有所帮助
<div id="listtableWrapperScroll">
<table id="listtable">
<tr>
<td>Data Data</td>
<td>Data Data</td>
<td>Data Data</td>
</tr>
</table>
</div>
#listtableWrapperScroll{
height:100px;
width:460px;
overflow-y:scroll;
border:1px solid #777777;
background:#FFFFF2;
}
#listtableWrapperScroll #listtable{
width:440px;
}
#listtableWrapperScroll #listtable tr td{
border-bottom:1px dashed #444;
}
我首先尝试了格林先生接受的答案，但我发现我的列没有对齐，浮动：左似乎很可疑。当我从无 scollbar 变为滚动条时——我的表格主体移动了几个像素并且我失去了对齐。
代码笔 https://codepen.io/majorp/pen/gjrRMx
CSS
.width50px {
width: 100px !important;
}
.width100px {
width: 100px !important;
}
.fixed_headers {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
th {
padding: 5px;
text-align: left;
font-weight:bold;
height:50px;
}
td {
padding: 5px;
text-align: left;
}
thead, tr
{
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
width: 100%;
height: 500px;
}
.tableColumnHeader {
height: 50px;
font-weight: bold;
}
.lime {
background-color: lime;
}
This was a challenging question. I think I finally have a solution that satisfies complete requirements: a vertical and horizontal scrollable dynamic table (dynamic because you can change the amount of rows and columns, and no cells have fixed width or height).
The HTML and CSS layout is quite simple as other people have mentioned. The key issue is recalculating (JavaScript) cell widths. And to make sure horizontal scrolling works, I also recalculate theader and tbody width.
Here's a fiddle https://jsfiddle.net/jmarcos00/6hv0dsj8/1/
HTML code:
<!--
thead and tbody have identifiers
table is inside a div container
-->
<div>
<table>
<thead id="mythead">
<tr>
<th>header one</th>
<th>two</th>
<th>header three</th>
<th>header one</th>
<th>two</th>
<th>header three</th>
</tr>
</thead>
<tbody id="mytbody">
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>data two</td>
<td>three</td>
<td>one</td>
<td>data two</td>
<td>three</td>
</tr>
</tbody>
</table>
</div>
CSS code:
/* table border rule */
table, td, th { border: 1px solid black; }
/* display as block plus display vertical scroll bars */
thead, tbody { display: block; overflow-y: scroll; }
/* sample height */
tbody { height: 100px; }
/* sample width and horizontal scroll bar */
div { width: 200px; overflow-x: auto; }
JavaScript code:
var i, w, wtot, thtot, thw, tdw, theadtr, tbodytr;
var th_rect, td_rect, theadtr_rect, tbodytr_rect;
var safe = new Array();
// get thead and tbody
var mythead = document.getElementById("mythead");
var mytbody = document.getElementById("mytbody");
// get first tr of thead and tbody
theadtr = mythead.children[0];
tbodytr = mytbody.children[0];
theadtr_rect = theadtr.getBoundingClientRect();
tbodytr_rect = tbodytr.getBoundingClientRect();
// get width difference of longer first tr
// difference between tr and parent
if (tbodytr_rect.width > theadtr_rect.width)
wtot = mytbody.getBoundingClientRect().width - tbodytr_rect.width;
else
wtot = mythead.getBoundingClientRect().width - theadtr_rect.width;
// get width difference between tr and total th width (first step)
thtot = theadtr_rect.width;
// get th thead array and td tbody array
theadtr = theadtr.children;
tbodytr = tbodytr.children;
// get loop
for (i = 0; i < theadtr.length; i++)
{
// second step for width difference between tr and total th width
th_rect = theadtr[i].getBoundingClientRect();
td_rect = tbodytr[i].getBoundingClientRect();
thtot -= th_rect.width;
// get width of each th and first row td (without paddings etc)
tdw = parseFloat(window.getComputedStyle(tbodytr[i]).getPropertyValue("width"));
thw = parseFloat(window.getComputedStyle(theadtr[i]).getPropertyValue("width"));
// get bigger width
w = (tdw > thw) ? tdw : thw;
safe.push(w);
// add to width total (decimal value with paddings etc)
w = (tdw > thw) ? td_rect.width : th_rect.width;
wtot += w;
}
// consider tr width and total th width difference
wtot += thtot;
// set loop
for (i = 0; i < theadtr.length; i++)
{
// set width to th and first row td
w = safe[i] + "px";
theadtr[i].style.width = w;
tbodytr[i].style.width = w;
}
// set width for thead and tbody
wtot = wtot + "px";
mythead.style.width = wtot;
mytbody.style.width = wtot;
我最简单的解决方案是基于固定列布局。您必须设置每列的宽度，例如：4 列 100 像素，每列等于 400 像素的总宽度。
table {
table-layout: fixed;
width: 400px;
}
td, th {
width: 100px;
}
固定表格布局算法比自动表格布局算法有很多优点（例如：水平布局只取决于表格的宽度和列的宽度，而不是单元格的内容；允许浏览器更快地布局表格比自动表格布局；一旦收到第一行，浏览器就可以开始显示表格；等等）
block然后，您必须通过将其显示样式强制为而不是默认来将其与 tbody 分开table-*
thead tr {
display: block;
}
tbody {
display: block;
height: 256px;
overflow-y: auto;
}
这将使tbody可滚动作为一个单独的框并且thead与它无关。这就是为什么你必须像上面那样修复列宽的主要原因。
工作 JsFiddle：https ://jsfiddle.net/angiolep/65q1gdcy/1/