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."



How to create scrollable tables in HTML-DHTML? My doubt is "I want to create a table whose he..

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

Post New Answer

More HTML DHTML Interview Questions

. How to specify the link in HTML and explain the target attribute?

1 Answers  


How do I indent the first line in my paragraphs?

2 Answers  


What is div short for?

1 Answers  


What is a meta word?

1 Answers  


Explain what is the use of localstorage in html5?

1 Answers  


What are tags for?

1 Answers  


Does chrome use html5?

1 Answers  


What is the svg element?

1 Answers  


Why we use 'clear' in html?

1 Answers  


What is tag english?

1 Answers  


Explain HTML blocks?

1 Answers  


Is img an empty tag?

1 Answers  


Categories