Is there a way to restrict the height of a table while still being able to scroll through the hidden elements?
I've tried a few methods but none seem to work as intended:
http://www.example.com/code/example
table.ex1 {
table-layout: auto;
height: 20px;
overflow-y: scroll;
}
table.ex2 {
table-layout: fixed;
height: 20px;
overflow-y: scroll;
}
There seems to be an issue with the display type.
If you switch the table to display: block;, you can set a height limit.
This CSS modification should work on your table (note that there is no tbody tag)
table {
display: block;
}
table tbody {
display: table;
}
UPDATE: This may be seen as a workaround, so it's recommended to use a div wrapper and apply the overflow property on that element for a cleaner solution.
overflow:scroll may not function as expected on tables due to a technical limitation, as discussed in this insightful SO post:
Andrew Fedoniouk raised the question:
"One technical reason is that the overflow property does not apply to tables." - Is there an explanation for this limitation?"
While I am no expert, it appears that this constraint could be attributed to maintaining compatibility with traditional table behaviors. The automatic table layout algorithm specified seems to conflict with the concept of overflow property application (specifically leading to only 'visible' being necessary).
Indeed, this lack of formal reasoning behind the inability for scrollable tables raises questions. It seems like vendors have silently agreed upon this restriction. Further exploration is needed.
The specification aligns with the idea of allowing elements to respect overflow settings. However, some implementations, such as Mozilla, might deviate from this norm. While I do not have a definitive answer in this context, the historical rendering behavior likely plays a role.
View the initial query here
Explore the main discussion thread here
If you still desire to achieve a scrolling effect, one common workaround involves enclosing the content within a div element inside the td:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px; height:20px;">
<div style="overflow: scroll; width:100%; height:100%;">Content goes here</div>
</td>
<td>200</td>
<td>300</td>
</tr>
</table>I am in the process of developing a rails app where I would like to include a side div for displaying news updates in a vertical feed style. I have made some progress with the layout, but now I am facing issues with finding a suitable news-ticker plugin th ...
I have spent a significant amount of time researching and coding, but I am still unable to get this seemingly trivial task to work. Here are the conditions: The browser window size is unknown, so any solution involving absolute pixel sizes will not work. ...
Hey there, I'm trying to achieve something that seems simple, but I can't quite figure it out. What I want to do is query a table and display the results in two separate divs on my webpage. Here's an example of the HTML structure I have: &l ...
It's common to have multiple labels (such as name, age, color) and a corresponding value for each one. One way to ensure that the values (for example Steve, 19, Red) all start in the same horizontal position is by organizing them in a 2 column, 3 row ...
My jQuery code is not recognizing an if statement. You can check out the CodePen link here. On my site, I have 4 page transitions - page right, page left, page up, and page down. The contact page is hidden beneath the main hero sections and appears with t ...
Here is the JavaScript code I am using: $(document).ready(function() { $('.LoginContainer').hide(); $('.list li a').click(function(){ $('.LoginContainer').togg ...
Here is my HTML and JS/jQuery code: (function($) { $('.list-group li').click(function(){ console.log("push li"); console.log($(this).attr('class')); console.log($(this).children('.hidden_input&ap ...
I am in the process of developing a straightforward web application that allows users to customize their settings. On the settings page, there are several toggle buttons that need to have their state changed during the page load to align with the preferenc ...
I am new to programming and recently achieved success with my 'click' eventListener. When clicking on the first two li elements within the ul, the class of the div toggles on and off as expected. However, I encountered an issue where clicking on ...
After spending a considerable amount of time trying to find a solution, I finally managed to create a simple button click redirection using NodeJS and Express. However, when clicking on the "Next page" button in my index.html file, I encountered an error s ...
It seems common knowledge that refreshing a webpage on mobile devices can be done by pulling down from the top. However, I am looking to shake things up and refresh the page by pulling up from the bottom instead. And I prefer no animations in the process. ...
I've been working on extracting data from a website (). While I have successfully retrieved some values like name, model, price, and fuel type, I am encountering difficulties with the "year" and "kilometers" fields. The code consistently returns "N/A" ...
I'm new to working with Jquery and I have a question. In my upload form, when something is uploaded the upload-button changes class from: <a class="upload-button upload buy" id="upload-button"><span>Upload a document</span></a> ...
Why does my code center in mobile view but not in Desktop? How can I solve this issue? I have tried using display: block; margin: auto; width:100%; and text-align: center;, but it did not work. let $slides, interval, $selectors, $btns, currentIndex, ne ...
My goal is to utilize AJAX in conjunction with Django, but I want to achieve this without relying on jQuery. So far, I have made progress in sending URL encoded data from AJAX to Django successfully. However, I am currently facing an issue where I am unabl ...
Currently, I am facing an issue with the positioning of the page footer. Despite my efforts, it does not remain at the bottom as intended. Please refer to the image for a visual representation of the problem. How can this be rectified? It is worth noting ...
Looking to adjust the timing on a number increase function using setInterval(Function, time). Initially set the variable for time as time = 1000, but now looking to dynamically change it by implementing a function triggered by a button click: function cha ...
In my popup window, the fade element is supposed to stretch to the full width of the screen. However, when the content exceeds 100% of the browser window height, the element does not extend to the full page height. If I set html, body { height: 100%; over ...
I am working with a code snippet that involves understanding how the attribute:disabled functions on an <option> within a <select> element! Let's say I have a dropdown for ratings and I select the 5-star option (★★★★★). Upon sel ...
I have an Array within Items. My goal is to display them in a Table format using PDFMake. table: { multiple pages headerRows: 2, widths: ['auto', 100, 200, 'auto', 'auto', 'auto'], body: [ ...