Back in 2005, Stu Nichols shared a technique for creating a fixed header with scrolling rows in a table on this site.
I'm curious if there are any newer methods or improvements to achieve the same effect, or is Stu's approach from 2005 still considered the most current?
From my knowledge, that is the most up-to-date information available. Depending on the browsers you are targeting, you can utilize CSS to apply an overflow: scroll property to the tbody element. However, this method is not officially supported in the CSS specification and may only work intermittently. Firefox appears to recognize it, and I believe Chrome does too, but Internet Explorer completely ignores it.
One approach that is similar to how JQGrid manages scrollable tables can be seen in their demos here. Instead of reinventing the wheel, you may want to consider utilizing their TableToGrid Method, which can transform an HTML table into their stylized grid.
When working with jQuery, consider utilizing a helpful plugin designed for this task. You can access this useful tool here
It's frustrating when tables can't handle dynamic width and height, right? Firefox used to have this feature up until version 3.6, but now they're removing it in the upcoming release. It's disappointing that none of the suggested frameworks address this issue effectively. You can voice your opinion on this by voting on the bug report:
https://bugzilla.mozilla.org/show_bug.cgi?id=552080
Show your support and let the Firefox team know that this is an important feature for users like us.
Here's a great solution that you might find helpful! Take a look at this CSS display code snippet below...
<html>
<head>
<meta charset="UTF-8">
<title>Scrollable Table Example</title>
<style type="text/css">
.divScroll
{
display:block;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-x: hidden;
-ms-overflow-y: scroll;
height: 70px;
}
.Header
{
display:table-header-group;
}
.HeaderCell
{
text-align: left;
display: table-cell;
}
.FooterCell
{
display: table-cell;
text-align: left;
}
.Row
{
display:table-row;
}
.Cell
{
display: table-cell;
}
.Footer
{
display: table-footer-group;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="Header">
<div class="Row">
<div class="HeaderCell" style="width:140px;">Column1</div>
<div class="HeaderCell" style="width:90px;">Column2 </div>
<div class="HeaderCell" style="width:190px;">Column3</div>
<div class="HeaderCell" style="width:100px;">Column4</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="divScroll">
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<!-- More rows to follow... -->
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="Footer">
<div class="Row">
<div class="FooterCell" style="width:140px;">A</div>
<div class="FooterCell" style="width:90px;"> B</div>
<div class="FooterCell" style="width:190px;">C</div>
<div class="FooterCell" style="width:100px;">D</div>
</div>
</th>
</tr>
</tfoot>
</table>
</body>
</html>
Looking for a solution! // Getting user input values var input1 = parseInt(document.getElementById("input1").value); var input2 = parseInt(document.getElementById("input2").value); var input3 = parseFloat(document.getElementById(" ...
On my webpage, I have a set of buttons located at the bottom. When I first open the page, all the buttons are displayed properly. However, sometimes the first three buttons become hidden mysteriously and the layout changes. I am puzzled as to what could be ...
I've been having a hard time creating an image gallery that adjusts its size automatically (width: 100%) based on the number of items it contains. For example, take a look at this gallery: http://codepen.io/anon/pen/eNMOEz .item { width: 75px; h ...
Currently, I am dealing with a situation where a getjson call is used to retrieve a large amount of data. However, I find myself constantly having to check if the data is null or not. Here is an example: if (data.Height == "") { $(&ap ...
Hello, I'm currently working on creating an HTML form and I need to validate it before submitting the form action. However, when I use AJAX to respond, I keep receiving a blank message. Can anyone help me with this issue? $(function(){ $("#ajax-p ...
I am working on a website that I want to adjust to the width of different browsers. Everything seems to be functioning properly, except for the fact that the parent div containing the 100% width divs always appears around 5 pixels too tall. This is causin ...
In an attempt to develop reusable components with Angular 1.4.3 and Angular-Material 1.0.5, the goal is to seamlessly integrate these components across various applications. However, a challenge arises as the Angular Material CSS contains styling rules th ...
In the form I created, I am looking to validate specific dropdown combinations (where one field must have a selected value) involving selectpicker. To achieve this, I am utilizing jQuery validation along with additional methods. The script for validation ...
Can data be posted to JsonP instead of passing it in the querystring as a GET request? I have a large amount of data that needs to be sent to a cross-domain service, and sending it via the querystring is not feasible due to its size. What other alternati ...
I have a JSON object with the following structure: obj { name: "abc" , entriesList : "list of entry obj" , propertiesList : "list of properties obj" }; In this structure, an entry is also another object entry { info : "data obj" , ...
I have encountered an issue with my bootstrap modal. When I submit a form within the modal and then cancel, the validation error messages persist when I reopen it. Is there a way to reset the modal back to its original state after validation? I've at ...
Currently, I am dealing with pre-existing code that is automatically generated and needs to adhere to a specific format: <div id="TITLE1"></div> <div id="div-1"></div> <div id="div-2"></div> <div id="div-3"></d ...
I am struggling with a function that is supposed to display the contents of posts when clicked on. My goal is to have a loading spinner appear for a few seconds before the post content shows up. However, I am facing an issue where the spinner only appears ...
$(function() { $("#pagination a").trigger('click'); // When the page loads, trigger a click event $('body').on('click','div.well well-sm',function(){ var list = $(this); $('#myModal .modal-title').h ...
As I am new to JSON and Ajax, the question I have may seem basic. When I try to display data from my JSON object containing 'name', 'task', 'date', and 'status' using Ajax, it does not show up on my page. Below is m ...
Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...
Check out the code snippet below: var playerInstance = jwplayer("mySingleVideoWrapper").setup({ image: getCurrentPosterSrc, sources: [ { file: 'file-360.mp4', label: "360p" ...
Context: I'm in the process of developing a collapsible sidebar navigation menu inspired by the bootstrap admin panel example found at: Issue: Upon collapsing the admin bar, a small bar of icons appears. To accommodate this, I added margin-left: 50 ...
When receiving data from the server in JSON format, I am struggling to set the "name" attribute on the columns (cells). Is sName the correct property to use for setting the "name" attribute for every Cell? Below is my Datables code: $('#' + se ...
My website features draggable images that each have their own x and y positions. I am attempting to pass these values into a MySQL database, but I'm facing an issue where all the images are getting assigned the same x and y values in the database. In ...