How to create scrollable tables in HTML-DHTML? My doubt
is "I want to create a table whose header will remain
stationery when I scroll the table vertically, but at the
same time when I scroll horizontally, the header should
scorll sidewise along with the body."
Answer / Prateek Kumar Srivastava
To create a table with a scrollable header in HTML-DHTML, you can use CSS and JavaScript. Here's an example using jQuery:
HTML:n<table id="myTable">n <thead>n <tr>n <th>Column 1</th>n <th>Column 2</th>n </tr>n </thead>n <tbody>n <!-- Table body goes here -->n </tbody>n</table>
CSS:n#myTable {n table-layout: fixed;n width: 500px;n height: 400px;n overflow: auto;n}n#myTable th, #myTable td {n padding: 10px;n border: 1px solid black;n}n
JavaScript:n$(document).ready(function() {n var table = document.getElementById('myTable');ntable.addEventListener('scroll', function() {n var scrollLeft = this.scrollLeft;n var cells = this.rows[0].cells;n for (var i = 0; i < cells.length; i++) {n cells[i].style.left = scrollLeft + 'px';n }n });n});
This code creates a fixed-layout table with a scrollable header and body. As you scroll horizontally, the table header will move along with the body.
| Is This Answer Correct ? | 0 Yes | 0 No |
. How to specify the link in HTML and explain the target attribute?
How do I indent the first line in my paragraphs?
What is div short for?
What is a meta word?
Explain what is the use of localstorage in html5?
What are tags for?
Does chrome use html5?
What is the svg element?
Why we use 'clear' in html?
What is tag english?
Explain HTML blocks?
Is img an empty tag?