Html 如何在可滚动div中制作固定标题表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17827908/
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
How to make fixed header table inside scrollable div?
提问by Rohan
I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.
我想让我的表头固定。表格存在于可滚动的 div 中。下面是我的代码。
<div id="table-wrapper">
<div id="table-scroll">
<table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
<thead>
<tr>
<th>Order ID</th>
<th>Order Date</th>
<th>Status</th>
<th>Vol Number</th>
<th>Bonus Paid</th>
<th>Reason for no Bonus</th>
</tr>
</thead>
<tbody>
<tr>
<td><%=snd.getOrderId()%></td>
<td><%=snd.getDateCaptured()%></td>
<td><%=snd.getOrderStatus()%></td>
<td>Data Not Available</td>
<td>Data Not Available</td>
<td>Data Not Available</td>
</tr>
</tbody>
</table>
</div>
</div>
Below is my CSS, which I am using for the above div:
下面是我用于上述 div 的 CSS：
#table-wrapper {
position:relative;
}
#table-scroll {
height:250px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#table-wrapper table * {
background:white;
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
回答by Mr. Alien
How about doing something like this? I've made it from scratch...
做这样的事情怎么样？我是从零开始的...
What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a divelement with a fixed height, and to enable scroll, am using overflow-y: auto;
我所做的是使用了 2 个表格，一个用于标题，始终是静态的，另一个表格呈现单元格，我使用div具有固定高度的元素将其包裹起来，并启用滚动，我正在使用overflow-y: auto;
Also make sure you use table-layout: fixed;with fixed width tdelements so that your tabledoesn't break when a string without white spaceis used, so inorder to break that string am using word-wrap: break-word;
还要确保您使用table-layout: fixed;固定宽度的td元素，以便table在使用 without 的字符串时不会中断white space，因此为了中断正在使用的字符串word-wrap: break-word;
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>
回答by Tenzin Nyima
Using position: stickyon thwill do the trick.
使用position: stickyonth可以解决问题。
Note: if you use position: stickyon theador tr, it won't work.
注意：如果您使用position: stickyonthead或tr，它将不起作用。
回答by EricP
Some of these answers seem unnecessarily complex. Make your tbody:
其中一些答案似乎不必要地复杂。让你的身体：
display: block; height: 300px; overflow-y: auto
Then manually set the widths of each column so that the thead and tbody columns are the same width. Setting the table's style="table-layout: fixed" may also be necessary.
然后手动设置每列的宽度，使 thead 和 tbody 列的宽度相同。可能还需要设置表格的 style="table-layout: fixed"。
回答by ngakak
I think you need something like this ?
我想你需要这样的东西？
.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid grey;}
</style>
<table class="table">
<thead>
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
<th>Judul4</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="table-wrap" >
<table class="table-dalam">
<tbody>
<?php foreach(range(1,10) as $i): ?>
<tr >
<td class="td-nya">td1 </td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
回答by adamvagyok
I needed the same and this solution worked the most simple and straightforward way:
我需要同样的，这个解决方案以最简单和直接的方式工作：
http://www.farinspace.com/jquery-scrollable-table-plugin/
http://www.farinspace.com/jquery-scrollable-table-plugin/
I just give an idto the table I want to scroll and put one line in Javascript. That's it!
我只是给id我想要滚动的表格并在 Javascript 中放置一行。就是这样！
By the way, first I also thought I want to use a scrollable div, but it is not necessary at all. You can use a div and put it into it, but this solution does just what we need: scrolls the table.
顺便说一句，首先我还以为我想使用可滚动的 div，但根本没有必要。您可以使用 div 并将其放入其中，但此解决方案正是我们所需要的：滚动表格。
回答by Babaikawow
This is my "crutches" solution by using html and css. There used 2 tables and fixed width of tables and table cell`s
这是我使用 html 和 css 的“拐杖”解决方案。使用了 2 个表格和固定宽度的表格和表格单元格
https://jsfiddle.net/babaikawow/s2xyct24/1/
https://jsfiddle.net/babaiikawow/s2xyct24/1/
HTML:
HTML：
<div class="container">
<table class="table" border = 1; > <!-- fixed width header -->
<thead >
<tr>
<th class="tbDataId" >№</th>
<th class="tbDataName">Прац?вник</th>
<th class="tbDataData">Дата</th>
<th class="tbDataData">Д?йсно до</th>
<th class="tbDataDiseases">Критер?й1</th>
<th class="tbDataDiseases">Критер?й2</th>
<th class="tbDataDiseases">Критер?й3</th>
<th class="tbDataDiseases">Критер?й4</th>
<th class="tbDataDiseases">Критер?й5</th>
</tr>
</thead>
</table>
<div class="scrollTable"> <!-- scrolling block -->
<table class="table" border = 1;>
<tbody>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Прац?вник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Д?йсно до</td>
<td class="tbDataDiseases">Критер?й1</td>
<td class="tbDataDiseases">Критер?й2</td>
<td class="tbDataDiseases">Критер?й3</td>
<td class="tbDataDiseases">Критер?й4</td>
<td class="tbDataDiseases">Критер?й5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Прац?вник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Д?йсно до</td>
<td class="tbDataDiseases">Критер?й1</td>
<td class="tbDataDiseases">Критер?й2</td>
<td class="tbDataDiseases">Критер?й3</td>
<td class="tbDataDiseases">Критер?й4</td>
<td class="tbDataDiseases">Критер?й5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Прац?вник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Д?йсно до</td>
<td class="tbDataDiseases">Критер?й1</td>
<td class="tbDataDiseases">Критер?й2</td>
<td class="tbDataDiseases">Критер?й3</td>
<td class="tbDataDiseases">Критер?й4</td>
<td class="tbDataDiseases">Критер?й5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Прац?вник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Д?йсно до</td>
<td class="tbDataDiseases">Критер?й1</td>
<td class="tbDataDiseases">Критер?й2</td>
<td class="tbDataDiseases">Критер?й3</td>
<td class="tbDataDiseases">Критер?й4</td>
<td class="tbDataDiseases">Критер?й5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Прац?вник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Д?йсно до</td>
<td class="tbDataDiseases">Критер?й1</td>
<td class="tbDataDiseases">Критер?й2</td>
<td class="tbDataDiseases">Критер?й3</td>
<td class="tbDataDiseases">Критер?й4</td>
<td class="tbDataDiseases">Критер?й5</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
CSS：
*{
box-sizing: border-box;
}
.container{
width:1000px;
}
.scrollTable{
overflow: scroll;
overflow-x: hidden;
height: 100px;
}
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse;
}
/* Styles of the th and td */
/* Id */
.tbDataId{
width:5%;
}
/* Дата,
Д?йсно до */
.tbDataData{
/*width:170px;*/
width: 15%;
}
/* П ? Б */
.tbDataName{
width: 15%;
}
/*Критер?? */
.tbDataDiseases{
width:10%;
}
回答by Saajan
use StickyTableHeaders.jsfor this.
Header was transparent . so try to add this css .
标题是透明的。所以尝试添加这个 css 。
thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
回答by Sarmad Saleem
A Fiddle would have been more helpful nevertheless from what I understand, I guess what you need is persistent headers, look into this
尽管如此，根据我的理解，小提琴会更有帮助，我猜你需要的是持久的标题，看看这个
回答by Venugopal
This code works form me. Include the jquery.js file.
此代码适用于我。包括 jquery.js 文件。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){
var contentDivId = "contentDiv";
var headerDivId = "headerDiv";
var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings');
/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/
fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
/*Start : Place header row cell and content table first row cell inside <DIV>*/
var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
for (k = 0; k < contentFirstRowCells.length; k++) {
$( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
}
var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
for (k = 0; k < headerFirstRowCells.length; k++) {
$( headerFirstRowCells[k] ).wrapInner( "<div></div>");
}
/*End : Place header row cell and content table first row cell inside <DIV>*/
/*Start : Fix width for columns of header cells and content first ror cells*/
var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
for (i = 0; i < contentColumns.length; i++) {
if (i == contentColumns.length - 1) {
contentCellWidth = contentColumns[i].offsetWidth;
}
else {
contentCellWidth = contentColumns[i].offsetWidth;
}
headerCellWidth = headerColumns[i].offsetWidth;
if(contentCellWidth>headerCellWidth){
$(headerColumns[i]).css('width', contentCellWidth+"px");
$(contentColumns[i]).css('width', contentCellWidth+"px");
}else{
$(headerColumns[i]).css('width', headerCellWidth+"px");
$(contentColumns[i]).css('width', headerCellWidth+"px");
}
}
/*End : Fix width for columns of header and columns of content table first row*/
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
}
function radioCount(){
alert(document.form.elements.length);
}
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
<td><div>Firstname</div></td>
<td><div>Lastname</div></td>
<td><div>Points</div></td>
</tr>
<tr>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr-->
<tr id="tableColumnHeadings" class="tableColumnHeadings">
<td> </td>
<td>Firstname</td>
<td>Lastname</td>
<td>Points</td>
</tr>
<tr style="height:0px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
<td>Jillsddddddddddddddddddddddddddd</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Hymanson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Hymanson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</form>
</body>
</html>
