Tips for adjusting the overflow of elements within an HTML table

Is there a way to make td elements scrollable (excluding the table side column) when the screen size is smaller than a certain threshold, x?

To clarify, take a look at this example: http://jsfiddle.net/uf32ojm5/7/

My goal is to have only the comments fields scroll while keeping the "group" column fixed.

To achieve the fixed "group" column, I've used the following CSS code:

@media only screen and (max-width: 590px) {
  .groupColm{
    position:fixed;
    min-width:100px;
    z-index:1;
  }
}

However, how can I specifically scroll only the comments fields?

Thank you for your assistance!

Answer №1

One possible solution could be to place the comment fields within an internal table located inside the td element. By enabling scrolling specifically for the content of that td, which includes the internal table, you can control the display size as needed.

I trust that my suggestion may assist you in addressing this issue.

Answer №2

Victory! I cracked the code!

section table { display: block; position: relative; width: 100%; }
section tbody { display: block; width:auto; position: relative; overflow-x: auto; white-   
space: nowrap; }
section thead tr { display: block; }
section th { display: block; text-align:left; padding-left:10px; height:50px; line-
height:40px;}
section tbody tr { display: inline-block; vertical-align: top; }
section td {display: block; text-align: left; }

live link: http://jsfiddle.net/uf32ojm5/12/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to attach an EventListener to an <option> element?

I have been attempting to attach an EventListener to an <option> Element. Despite trying various methods, I have not seen any success so far. I am currently working with VueJS, and I attempted to utilize their event-binding mechanism. VueJS - Event ...

What is the best way to select a specific image from a collection of images within my Ajax form?

Currently, I am new to AJAX coding and still trying to familiarize myself with it. I have managed to create an AJAX multi-page form where each "new" page is contained within divs in HTML. The CSS is responsible for the styling, and there is some JavaScript ...

What is the best way to adjust the widths of a two-row header table using the table-layout: fixed property?

Here is the table header setup I am aiming for: <table class="tabel_op_panou" style="margin: 0px 2px 0px 2px; width: 99%; table-layout:fixed;"> <tr> <th rowspan="2" style="width: 35%;">A</th> <th colspan="2" style="width ...

UL tags incompatible with columns

I am attempting to create 2 columns using an ordered list (ul). Despite successfully adding the ul and li's, I am encountering issues with the column formatting. You can view the JSFiddle here. Below is the code snippet: ul { background-color:yello ...

Tips for splitting words in a responsive Bootstrap table

Here is the code snippet I am struggling with: <table id="table" class="dataTable table table-hover table-md table-responsive" cellspacing="0" role="grid"> <thead> <tr> ...

Create a basic grid layout using Bootstrap

I'm struggling to create this straightforward grid layout using Bootstrap: https://i.sstatic.net/fnQRt.png Essentially, I attempted the following method based on Bootstrap documentation: <td> <div class="row"> <div class=&q ...

Rotational orientation of a progress circle image in SVG

I am currently working on developing a circular progress bar, similar to the one shown in the image below. The progress of this bar is determined by percentages and it moves around the circle accordingly. I have managed to get the progression moving, b ...

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...

Create a nested table with a table-layout set to auto and a width of 100%, allowing for overflow when the window

How can I achieve a table with table-layout: auto and a 100% width that overflows horizontally when the window is too narrow without showing a scrollbar? Consider these examples: WORKING EXAMPLE 1 <div style="width: 100%; overflow-x: auto"> &l ...

Can a function be embedded within a React render method that includes a conditional statement to update the state using setState()?

My application randomly selects three values from an array found within defaultProps and then displays these values inside div elements in the return JSX. It also assigns these values to properties in the state object. I am facing a challenge where I need ...

Retrieve information from buttons generated within a while loop

My script uses a while loop to iterate through the drivers table and populate buttons with their names. function displayDriversMenu() { global $conn; $query = mysqli_query($conn, "SELECT * FROM drivers"); ...

Generating distinct identification numbers for each element in an array, regardless of how many times it is invoked on a page

I'm currently working on a website where I have the store's 'open hours' displayed in three different locations within one page. They appear in the header, body, and footer sections. To simplify updates, I decided to use PHP to pull thi ...

Preventing a webpage from responding to events by utilizing either CSS or jQuery

I apologize if the title is unclear, but I couldn't find the right words to phrase my question. On my website -- -- there is an alert box that appears onLoad. I need to convert it into a modal box so that when it appears, users are unable to use the ...

Converting JSON data into an HTML table representation

My code reads SQL data and converts it into JSON format. $sql = "SELECT students.studentnumber, students.firstname, students.lastname, badge_id FROM students INNER JOIN student_has_badge WHERE student_has_badge.badge_id = 10 AND student.studentnumber ...

Updating class after refresh of ng-repeat in AngularJS/Javascript

I am currently using angularJs in conjunction with cordova. Within my ng-repeat loop, each item has an ng-click event that stores the value of the item in an array. Additionally, when I click on an item, it toggles a class on the corresponding div (using ...

Which alternative function can I use instead of onchange without having to modify the slider beforehand in order for it to function properly?

Check out my website: alainbruno.nl/form.html to see the "Race" form and the "Age" slider. I've noticed that the minimum and maximum values of the Age slider only update correctly when you first use the slider before selecting a different race. Any id ...

Activate SVG graphics upon entering the window (scroll)

Can anyone assist me with a challenging issue? I have numerous SVG graphics on certain pages of my website that start playing when the page loads. However, since many of them are located below the fold, I would like them to only begin playing (and play onc ...

Comparison between using jQuery to append and execute a <script> tag versus using vanilla JavaScript

As I enhance my application, I've made the decision to embrace Bootstrap 5, which no longer relies on jQuery. Consequently, I am working to eliminate this dependency from my application entirely. One of the changes I'm making is rewriting the Ja ...

A guide to setting up a Python CGI web server on a Windows operating system

I am looking to set up a basic Python server on a Windows system to test CGI scripts that will ultimately run on a Unix environment. However, when I access the site, it displays a blank page with no source code visible. I am struggling to identify the issu ...

Conceal or reveal buttons using JavaScript

I am struggling with a function that is supposed to hide certain buttons and create a new button. When I click on the newly created button, it should make the previously hidden buttons visible again. However, the function does not seem to work properly. ...