admin管理员组文章数量:1317898
i want to make a table header fix to one position and allow the remaining content of table to be scrollable(code below). I am using colspan and rowsapn property in the table header row . Is there any way to fix it ?
<html>
<body>
<div id="secondtable" style="width:100%; height:380px; overflow:auto;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" bgcolor="#0B2B62">
<th>No.</th>
<th>Store Name</th>
<th>Receipts</th>
<th colspan=2>Receipts vs Budget</th>
<th colspan=3>Receipts vs Last Year</th>
<th>Contribution</th>
<th colspan=2>Contribution vs Budget</th>
</tr>
<tr class="tt" style="background-color:#C2C2C2;">
<td></td>
<td></td>
<td></td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</font></td>
<td><font color="black">Var</font></td>
<td></td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</font></td>
</tr>
<tr class="tt" style="background-color:#D7F2FF">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
//this is css
table {
border-collapse:separate;
border-spacing: 0;
color:white;
background-color:white;
border: 1px solid black;
border-radius: 8px;
-moz-border-radius: 5px;
padding: 5px;
font-family:sans-serif;
}
.mytable{
background-color:#014483;
}
.tt{
border-color:#2B4F81;
}
.ttt{
background-color:#BBDBF4;
border:#2B4F81;
}
i want to make a table header fix to one position and allow the remaining content of table to be scrollable(code below). I am using colspan and rowsapn property in the table header row . Is there any way to fix it ?
<html>
<body>
<div id="secondtable" style="width:100%; height:380px; overflow:auto;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" bgcolor="#0B2B62">
<th>No.</th>
<th>Store Name</th>
<th>Receipts</th>
<th colspan=2>Receipts vs Budget</th>
<th colspan=3>Receipts vs Last Year</th>
<th>Contribution</th>
<th colspan=2>Contribution vs Budget</th>
</tr>
<tr class="tt" style="background-color:#C2C2C2;">
<td></td>
<td></td>
<td></td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</font></td>
<td><font color="black">Var</font></td>
<td></td>
<td><font color="black">Var £</font></td>
<td><font color="black">Var %</font></td>
</tr>
<tr class="tt" style="background-color:#D7F2FF">
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
//this is css
table {
border-collapse:separate;
border-spacing: 0;
color:white;
background-color:white;
border: 1px solid black;
border-radius: 8px;
-moz-border-radius: 5px;
padding: 5px;
font-family:sans-serif;
}
.mytable{
background-color:#014483;
}
.tt{
border-color:#2B4F81;
}
.ttt{
background-color:#BBDBF4;
border:#2B4F81;
}
- see the demo here how i want- aspsnippets./Demos/1049 – MURTUJA BHATIA Commented Dec 28, 2015 at 5:50
5 Answers
Reset to default 3Question of 3 years old,however for those who still have no solution for this (table head with rowspan) I finally have the methode using js.
<div id="table">
<table>
<thead>
<!-- your head code -->
</thead>
<tbody>
<!-- your body code -->
</body>
</table>
</div>
CSS
#table{
height:200px; //for example
overflow-y:auto;
}
JS
let statusCard = document.querySelector('#table');
// add scroll event listener for change head's position
statusCard.addEventListener('scroll',e =>{
let tableHead = document.querySelector('thead');
let scrollTop = statusCard.scrollTop;
tableHead.style.transform = 'translateY(' + scrollTop + 'px)';
})
You might need to place your header in a div with a class .sticky or whatever you like and a proper CSS.
HTML
<div class="sticky">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" bgcolor="#0B2B62">
<th>No.</th>
<th>Store Name</th>
<th>Receipts</th>
<th colspan=2>Receipts vs Budget</th>
<th colspan=3>Receipts vs Last Year</th>
<th>Contribution</th>
<th colspan=2>Contribution vs Budget</th>
</tr>
</table>
</div>
CSS
.sticky {
position: fixed;
top: 2px;
width: 96.5%;
}
See the example here: http://codepen.io/omerblink/pen/wMzLow?editors=110
You can use:
.mytable tr th
{
table-layout: fixed;
}
This may help you:
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
I doubt you will be able to acheive this with a single table. So I have actually created two tables one for header and another for body & the former is always fixed. Also I assume that number of columns is static. Here is the code
<!--Header part-->
<div id="firsttable" style="width:100%;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<thead><tr class="tt " bgcolor="#0B2B62">
<th id="no">No.</th>
<th id="sto">Store Name</th>
<th id="res">Receipts</th>
<th colspan=2 id="rb">Receipts vs Budget</th>
<th colspan=3 id="rl">Receipts vs Last Year</th>
<th id="con">Contribution</th>
<th colspan=2 id="cb">Contribution vs Budget</th>
</tr>
</thead>
</table>
</div>
<!-- body part -->
<div id="secondtable" style="width:100%; height:380px; overflow:auto;">
<table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center">
<tr class="tt" style="background-color:#C2C2C2;">
<td headers="no">A</td>
<td headers="sto">B</td>
<td headers="res">C</td>
<td colspan="2" headers="rb"><div style="color:black">Var £</div><div style="color:black">Var %</div></td>
<td colspan="3"><div style="color:black">Var £</div><div>Var %</div><div>Var</div></td>
<td>D</td>
<td colspan="2"><div style ="color:black">Var £</div><div style="color:black">Var %</div></td>
</tr>
<!-- Include multiple tr to get scrollbar -->
</table>
</div>
CSS
table {
border-collapse:separate;
border-spacing: 0;
color:white;
background-color:white;
border: 1px solid black;
border-radius: 8px;
-moz-border-radius: 5px;
padding: 5px;
font-family:sans-serif;
}
.mytable{
background-color:#014483;
}
.tt{
border-color:#2B4F81;
}
.ttt{
background-color:#BBDBF4;
border:#2B4F81;
}
td,th{
max-width:10px;
}
.mytable div{
max-width:40%;
display:inline
}
WORKING COPY
NOTE:When this scrollbar is visible you may see that the header columns is not in sync with body columns. This is because scroll bar has a width and it is will occupy some space.In this case you can adjust the width of any body column so that it is in sync. Also I understand basically you need 7 columns there can be subcolumns. So in body I have created 7 columns and div to replicate the sub columns
Hope this will be helpful
本文标签： javascriptfix table header with rowspan and colspan property and scrollableStack Overflow
版权声明：本文标题：javascript - fix table header with rowspan and colspan property and scrollable - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742035412a2417255.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论