我*创建了一个可滚动的表,该表仅向上滚动,tbody
而其余部分保持固定,这就是应该的样子,但是,当表tbody
不够大时,我做的小技巧是使滚动条不tbody
排列,因为它不排列。我如何创建一个函数来检测它(各行td
)何时超出了表的大小(假设它的高度为100%),所以我可以更改表的设置。
前任:
function detector(){
if(table.overflow-y:is_on){
//bla
}
}
*我们实际上是StackOverflow社区,我,谢谢!健康长寿·繁荣昌盛。
当行数多于表格的行数时,height
就可以了:
但是如果没有...
th, td {
word -
break: break -all;
}
html {
width: 100 % ;
height: 100 % ;
overflow: hidden;
}
body {
background: #FFF;
color: #000;font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;margin: 10px; padding: 0;}
table, td, a {color: # 000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans - serif
}
h1 {
font: normal normal 18px Verdana,
Geneva,
Arial,
Helvetica,
sans - serif;
margin: 0 0 5px 0
}
div.tableContainer {
clear: both;
border: 1px solid #963;padding-right:1px;height: 285px;overflow: auto;width: 100%;}
html>body div.tableContainer {overflow: hidden;width: 100%;height:83%;}
div.tableContainer table {float: left;width: 100%;height:100%;}
html>body div.tableContainer table {
width: calc(100% - 16px);
height:100%;
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
thead.fixedHeader th {
background: # C96;
border - left: 1px solid# EB8;
border - right: 1px solid# B74;
border - top: 1px solid# EB8;
font - weight: normal;
padding: 4px 3px;
text - align: left;
}
thead.fixedHeader a, thead.fixedHeader a: link, thead.fixedHeader a: visited {
color: #FFF;
display: block;
text - decoration: none;
width: 100 % ;
}
thead.fixedHeader a: hover {
color: #FFF;
display: block;
text - decoration: underline;
width: 100 % ;
}
html > body tbody.scrollContent {
display: block;
overflow: auto;
width: 100 % ;
height: 100 % ;
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border - bottom: none;
border - left: none;
border - right: 1px solid# CCC;
border - top: 1px solid# DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border - bottom: none;
border - left: none;
border - right: 1px solid# CCC;
border - top: 1px solid# DDD;
padding: 2px 3px 3px 4px
}
.scrollTable, .scrollContent {
overflow: visible;
}
html > body tbody.scrollContent {
width: calc(100 % +17px);
}
th,
td {
word-break: break-all;
}
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0;
}
table,
td,
a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0
}
div.tableContainer {
clear: both;
border: 1px solid #963;
padding-right: 1px;
height: 285px;
overflow: auto;
width: 100%;
}
html>body div.tableContainer {
overflow: hidden;
width: 100%;
height: 83%;
}
div.tableContainer table {
float: left;
width: 100%;
height: 100%;
}
html>body div.tableContainer table {
width: calc(100% - 16px);
height: 300px;
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left;
}
thead.fixedHeader a,
thead.fixedHeader a:link,
thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%;
}
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%;
}
html>body tbody.scrollContent {
display: block;
overflow: auto;
width: 100%;
height: 100%;
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
.scrollTable,
.scrollContent {
overflow: visible;
}
html>body tbody.scrollContent {
width: calc(100% + 17px);
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pure CSS Scrollable Table with Fixed Header</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="language" content="en-us">
<style type="text/css"></style>
</head>
<body>
<h1>Pure CSS Scrollable Table with Fixed Header</h1>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" id="Stable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th><a href="#">Header 1ahjsgdhjagsdhjgahjsdghjasgdhjagshjdgahjsdghjagsdhj</a>
</th>
<th><a href="#">Header 2</a>
</th>
<th><a href="#">Header 3</a>
</th>
<th><a href="#">Header 2</a>
</th>
<th><a href="#">Header 3</a>
</th>
<th><a href="#">Header 2</a>
</th>
<th><a href="#">Header 3</a>
</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
<div>
<br>
</div>
</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span>
</html>
var tbody = $('.scrollContent'),
theader = $('.fixedHeader'),
table = $('#Stable');
console.log(tbody[0].scrollHeight);
console.log(theader.height());
console.log(table.height());
if(table.height() - theader.height() < tbody[0].scrollHeight){
console.log('Overflowed height of table');
} else {
console.log('Did not overflow.');
}
我相信这就是您要寻找的。它使用jQuery,但可以根据需要将其转换为原始Javascript。
在tbody[0].scrollHeight
给出了TBODY的实际高度。因此,如果此值大于表格的高度-页眉的高度,则会创建一个滚动条。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句