Trying to make fixed table header in HTML, scroll and visibility issues? - javascript

I have been trying to make a table in HTML with a fixed header (and a horizontal scrollbar when necessary). This JSFiddle shows what I have so far:
html, body {
margin:0;
padding:0;
height:100%;
}
.horizontalscrollcontainer {
position: relative;
padding-top: 37px;
overflow:auto;
}
.verticalscrollcontainer {
background:transparent;
overflow-y:auto;
overflow-x:visible;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
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: black;
padding: 9px 25px;
top: 0px;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<div class="horizontalscrollcontainer">
<div class="verticalscrollcontainer">
<table>
<thead>
<tr class="header">
<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>
https://jsfiddle.net/byB9d/6248/
The problem I am having is that the horizontal scrollbar seems to go on the verticalscrollcontainer rather than the horizontalscrollcontainer. Is there any way to regulate this (the overflow-x is automatically set to auto because overflow-y is set to auto).
Thanks for any suggestions!

i guess you require this in css:
table thead{position:fixed;}
Fiddle

I would split into 2 sections and dictate the widths (% if responsive).
<table id="table-top">
<tr>
<th>A</th>
<th>B</th>
</tr>
</table>
<div id="table">
<table id="table_id">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
CSS....
#table{
overflow-y: auto;
height:150px;
border-bottom:1px solid grey;
}
table{
width:100%;
}
table td, table th{
border-color: grey;
border: 1px solid;
width:50%;
}
https://jsfiddle.net/tonytansley/mvp4u54q/

use this may help u
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
position:relative;
background:transparent;
top:0px;
overflow:auto;
width: 100%;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th:first-child div {
border: none;
}
.wrap {
width: 617px;
}
.wrap table {
width: 600px;
table-layout: fixed;
}
</style>
</head>
<body>
<div class="wrap">
<table class="head">
<tr>
<td>Table attribute name</td>
<td>Value</td>
<td>Description</td>
</tr>
</table>
<div class="container">
<table>
<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>
</table>
</div>
</div>

Found this fiddle... Looks perfect for you:
Uses a section to wrap the table [Not my work just providing the link]
<section class="">
Fiddle

https://jsfiddle.net/agpq359b/
not sure, it is what you want
<div class="container">
<table>
<thead>
<tr class="header">
<th>Table attribute name
</th>
<th>Value
</th>
<th>Description
</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>
</tbody>
</table>
</div>
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
background:transparent;
overflow:auto;
width: 100%;
height: 200px;
}
table {
border-spacing: 0;
width:120%;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: black;
padding: 9px 25px
}
th:nth-of-type(1), td:nth-of-type(1){
width:200px;
}
th:nth-of-type(2), td:nth-of-type(2){
width:100px;
}
th:nth-of-type(3), td:nth-of-type(3){
width:200px;
}
td + td {
border-left:1px solid #eee;
}
thead {
position:absolute;
border: none;
top:0px;
}
tbody{
margin-top:38px;
display:block;
}

I think you best take the header out of the container:
<div class="xclass">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div class="headerdiv">Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
</table>
</div>
Check this Fiddle - https://jsfiddle.net/byB9d/6241/

Related

Hovering in a table to affect a header

I'm not sure if this is even possible to accomplish without JavaScript, but it would be preferable.
This is kind of what my page looks like:
____________________________
| TITLE | |This is a fixed header. I want "TITLE"
|----------------------------| |to be the name of the row, and I want it
| _______ _______ ___| |to show when I hover over one of the
| | | | | | | |image rows.
| | | | | | | |
| |_______| |_______| |___| | [The boxes are the images.]
| _______ _______ ___| |
|__|_______|__|_______|__|___| |
header {
background: #FFFFFF;
position: fixed !important;
width: 100%;
height: 85px;
top: 0;
left: 0;
text-align: left;
font-size: 30px;
border: 1px solid black;
}
body {
padding-top: 100px;
/*equal to the height of your header */
}
r1n {
width: 200px;
height: 200px;
display: inline;
}
r1n:hover {
display: none
}
table tr:hover ~ header r1n {
display: none
}
<header>
<r1n>TITLE_NAME</r1n>
</header>
<body>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</body>
Is there a CSS method/trick to make the fixed header show the row's name?
Maybe by concealing a bunch of divs in the header and displaying them depending on which row the cursor is on?
EDIT:
#AndrewBone: CSS and JS solution
#Dekel: JS solution
EDIT^2: Just... just look at all the answers. They're all good. CSS/JS/JQ.
I see lots of people saying this isn't possible, it is though I would never suggest you use it in practice.
Here is an example:
body {
margin: 0;
}
table {
margin: 18px 0 0 0;
position: relative;
border: 1px solid black;
}
tr:nth-child(even) {
background: #DDD;
}
tr:nth-child(odd) {
background: #FFF;
}
tr:hover {
background: tomato;
}
tr[data-header]:hover:after {
content: attr(data-header);
position: absolute;
top: -19px;
left: -1px;
border: 1px solid black;
border-bottom-width: 0px;
width: 100%;
}
td {
padding: 5px 15px;
}
<table>
<tr data-header="Header 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Header 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
I've added a header attribute to each tr also I've added a pseudo element, this pseudo element puts some content, which in this example is taken from the header attribute thanks to attr(header), and positions it where we want it in relation to the parent, table, just like that we have some code that works and is JS free. But honestly, use JS if you can :-)
Hope this helps.
EDIT:
Here's a pure javascript solution
const trSel = document.querySelectorAll("tr[data-header]");
for (let i = 0; i < trSel.length; i++) {
trSel[i].addEventListener("mouseover", function(evt) {
let headSel = trSel[i].parentElement.parentElement.parentElement.querySelector(":scope > .header");
headSel.innerHTML = trSel[i].dataset.header;
});
}
body {
margin: 0;
}
.header {
padding: 5px 0;
}
tr:nth-child(even) {
background: #DDD;
}
tr:nth-child(odd) {
background: #FFF;
}
tr[data-header]:hover {
background: tomato;
}
td {
padding: 5px 15px;
}
<div>
<div class="header">
Placeholder!
</div>
<table>
<tr data-header="Table 1 Row 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 1 Row 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</div>
<h2>
Wild second table appeared
</h2>
<div>
<div class="header">
Placeholder!
</div>
<table>
<tr data-header="Table 2 Row 1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-header="Table 2 Row 4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</div>
It uses the same principles, but now it's actually updating the text so when you move your mouse away it can keep the last selected row. It works with multiple tables too.
EDIT 2: slight edit, I've changed to using data-header instead of header, just because that's what you're meant to do ;-)
Just because you asked for a js solution in the comment #AndrewBone's answer.
Notice the usage of index to find the current position of the hovered tr inside the table. Index starts in 0, hence the +1 you see there.
$(function() {
$('#tbl1 tr').hover(function() {
i = $('#tbl1 tr').index(this) + 1;
$('r1n').text('Row ' + i);
});
});
header {
background: #FFFFFF;
position: fixed !important;
width: 100%;
height: 85px;
top: 0;
left: 0;
text-align: left;
font-size: 30px;
border: 1px solid black;
}
body {
padding-top: 100px;
/*equal to the height of your header */
}
r1n {
width: 200px;
height: 200px;
display: inline;
}
#tbl1 {
border-collapse: collapse;
}
#tbl1 td {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<r1n>TITLE_NAME</r1n>
</header>
<table id="tbl1" border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
i see that you have some answers ( and an accepted one ) just wanted to put a JQ solution with targets here if anyone prefers something like this :) ( i guess i doesn't hurt another answer )
in this code, table and header are siblings , even if in your posted code, body is the parent of table and sibling with header. here, everything is automatically inserted inside the default <body> tag
$("table tr").hover(function(){
var data = $(this).attr('data-target'),
target = $(this).parents('table').siblings('header').find('h1')
$(target).each(function(){
if($(this).attr('id') == data) {
$(this).toggle()
}
})
})
header {
background: #FFFFFF;
position: fixed !important;
width: 100%;
height: 85px;
top: 0;
left: 0;
text-align: left;
font-size: 30px;
border: 1px solid black;
}
body {
padding-top: 100px;
/*equal to the height of your header */
}
header h1 {
display:none;
position:absolute;
left:0;
top:0;
margin:0;
}
table tr {
cursor:pointer;
background:blue;
}
table tr:nth-child(odd) {
background:red;
}
table,td {
border-collapse:collapse;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h1 id="row1">Title row1 </h1>
<h1 id="row2">Title row2 </h1>
<h1 id="row3">Title row3 </h1>
<h1 id="row4">Title row4 </h1>
</header>
<body>
<table>
<tr data-target="row1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row2">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row3">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr data-target="row4">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</body>

CSS/HTML fixed position element resizing when browser resizing

This is my situation: I have a table with table header position: fixed and a couple of table body rows with their width set to 100%.
I am trying to make the header row resize properly when browser resizes, so its cells lines up body row cells.
How am I going to achieve that? (trying to make a position: fixed element react to browser size-change dynamically)
Here is my code. A very simple webpage
<html>
<head>
<style>
body{
width:100%;
}
thead{
position:fixed;
width:100%
overflow:visible;
align:center;
}
th{
border:2px solid black;
width:20%;
text-align:center;
}
td{
border:2px solid black;
width:20%;
text-align:center;
}
table{
width:80%;
margin:auto;
margin-top:50px;
}
.empty{
height:30px;
}
.empty td{
border:none;
}
</style>
</head>
<body>
<table>
<thead>
<th>
heading1;
</th>
<th>
heading2;
</th>
<th>
heading3;
</th>
<th>
heading4;
</th>
<th>
heading5;
</th>
<thead>
<tbody>
<tr class="empty">
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>
cell1;
</td>
<td>
cell2;
</td>
<td>
cell3;
</td>
<td>
cell4;
</td>
<td>
cell5;
</td>
</tr>
<tr>
<td>
cell1;
</td>
<td>
cell2;
</td>
<td>
cell3;
</td>
<td>
cell4;
</td>
<td>
cell5;
</td>
</tr>
<tbody>
</table>
</body>
</html>
I'm developing a website tool using ASP.net currently. Any solution in ASP.net will be much appreciated.
The table element is not quite flexible as other in the html. Aparently the 'position:fixed' property will make the table ignore the width specification.
Therefore I tweaked your html and css a bit, in order to better divide the document's parts into header and content (section).
Basically, the header will contain only the table head.
The section will contain all the table rows and data in it. When scrolling, the header element will remain fixed and the table head cells in it (which has been given the exact same css attributes as the td cells) will remain perfectly aligned with their respective columns.
Hope this helps, good luck.
body {
width: 100%;
margin: 0px;
}
header {
width: 100%;
position: fixed;
margin-top: -30px;
}
section {
width: 100%;
margin-top: 50px;
}
table {
width: 80%;
margin: 0px auto;
}
header table th,
section table td {
width: 20%;
text-align: center;
border: 2px solid black;
}
<header>
<table>
<thead>
<th>heading1;</th>
<th>heading2;</th>
<th>heading3;</th>
<th>heading4;</th>
<th>heading5;</th>
</thead>
</table>
</header>
<section>
<table>
<tbody>
<tr>
<td>cell1;</td>
<td>cell2;</td>
<td>cell3;</td>
<td>cell4;</td>
<td>cell5;</td>
</tr>
<tr>
<td>cell1;</td>
<td>cell2;</td>
<td>cell3;</td>
<td>cell4;</td>
<td>cell5;</td>
</tr>
</tbody>
</table>
</section>

How do I make a <tr> behave as a fixed topbar?

I have a table that displays some information with the first row being headers for the respective information.
On scrolling, let's say 100px from the top of the page, i'd like the header row to stay fixed at the top of the visible screen so that as you scroll down the table you can still see the headers.
I've tried:
$(window).scroll(function(){
if( $(window).pageYOffset > 100 ){
$("#resultTableHeader").css('position', 'fixed');
$("#resultTableHeader").css('top', '70px');
$("#resultTableHeader").css('z-index', '2');
}
});
but it doesn't seem to do anything.
Even if it did, however, make the header row fixed, If one column expanded the header row column, then pulling it out of the flow would make that column not be expanded anymore.
Is there a way to do this?
EDIT (more info):
I can guarantee that the whole page will be just the table so staying at the top of the screen for any Y co-ord past 100px would be acceptable.
When I say fixed I mean that the header row will stay pinned to the top of the VISIBLE window as you scroll down along the table.
Fixed table header with pure html and css
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;
}
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<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>
</section>
This is a common problem when using table elements. Most libraries use two tables to fix this. The first table only contains the th elements and the second table has all tr elements.
Check jqgrid for example.

Html table with Row lines hidden

<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The above html data provides a table which has corresponding rows and columns. I want a format in which lines between rows should be hidden only column lines and table border lines should be visible . Hope my question is clear now . I want to create a table where lines between rows should be hidden
You can use the following css:
JSFIDDLE https://jsfiddle.net/seadonk/uf37xzqh/3/
HTML
<table id="thetable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
</table>
CSS
#thetable {
border: 2px solid gray;
background: lightgray;
border-spacing: 0px;
border-collapse: collapse;
}
#thetable td{
border-right: 2px solid gray;
padding: 20px;
}
You need to set the css properties border and border-collapse on your table tag and set the right border for your td.
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td {
border-right: 1px solid black;
text-align: center;
padding: 5px;
}
<table>
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>
<table frame="box" rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
try this
JsFieddle
HTML
<table style='border:solid' cellpadding="10" cellspacing="0">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
css
td{border-right:solid}

HTML table headers to be fixed without scrolling

Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ .
I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance.
My html code:
<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td>
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>
</table>
</td>
</tr>
</table>
</div>
You have to put your header in a seperate table and put a fixed position on it. Take a look at this.
http://jsfiddle.net/7t9qkLc0/47/
<table width="290px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</table>
<table style="margin-top:25px">
<tr> ....
Try it like this:
Changed this in the HTML:
<th>Column1
<div>Column111</div>
</th>
<th>Column2
<div>Column222</div>
</th>
(The divs are new)
And add this CSS:
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: blue;
color: #fff;
padding: 9px 25px;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
NOTE: The css is a little bit rough, but with a little bit styling it will look better
FIDDLE
Another way is to separate the headerline from the table and make them 2 elements.
you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.
th {
position: fixed;
}
I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/

Categories