Tips for creating a responsive <tr> table with <td> cells

Struggling to create a scrolling table with CSS? When using overflow-y : auto, the <td> tag becomes overloaded in the <tr> element. Take a look at the example code below to see the HTML and CSS in action:

HTML CODE : 

<table id="check" class="table table-fixed">
<thead>
    <tr>
        <th>No</th>
        <th>Name</th>
        <th>Gender</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Jax</td>
        <td>Male</td>
    </tr>
    <!-- More table rows here -->
</tbody>

CSS CODE :

#check {
 width: 70%;
 margin-top : 5%;
 margin-left: 45%;
 border-collapse: collapse;
 width: 100%;
}

#check td, #check th {
 border: 1px solid #ddd;
 padding: 8px;
}

#check tr:nth-child(even){background-color: #f2f2f2;}
#check tr:hover {background-color: #ddd;}

#check th {
 padding-top: 12px;
 padding-bottom: 12px;
 text-align: left;
 background-color: #4CAF50;
 color: white;
}

.table-fixed tbody {
 height: 250px;
 overflow-y: auto;
 margin-top: 1px;
 table-layout: fixed;
 display: block;
 overflow: auto;
}
.table-fixed thead tr {
 display: block;
}

You can experiment with this code in an online code editor like here.

htmlcssscroll

Answer №1

After discovering the techniques in the article linked below and using JQuery for implementation.

https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

$( document ).ready(function() {  
    $('#header_row').width(
    $('#header_row').width() - ($('#table_1').width() - $('#tbody').width()))
});
.fixed_header {
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 auto;
}

.fixed_header tr:nth-child(even) {
    background-color: #f2f2f2;
}

.fixed_header tr:hover {
    background-color: #ddd;
}

.fixed_header tbody {
    display: block;
    width: 100%;
    overflow: auto;
    height: 100px;
}

.fixed_header thead tr {
    display: block;
    background-color: #4CAF50;
}

    .fixed_header thead {
        color: #fff;
    }

    .fixed_header thead th {
        border: 1px solid white
    }

    .fixed_header tbody td {
        border: 1px solid gray
    }

    .fixed_header th,
    .fixed_header td {
        padding: 5px;
        text-align: left;
        width: 200px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div style="width: 100%">
    <table id="table_1" class="fixed_header">
        <thead>
            <tr id="header_row">
                <th>No</th>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Jax</td>
                <td>Male</td>
            </tr>
        </tbody>
    </table>
</div>
</html>

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

Adjust the baseline of text in <li> elements by shifting it 2 pixels upwards

My webpage menu is set up with inline "li" elements within a "ul". Each "li" has a colored border and contains an "a" tag. I'm looking to change the text color inside the "a" tag and move it 2px up when hovering over it without affecting the li border ...

htmlcssmenuhtml-lists

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

javascripthtmlcssag-grid

I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

Having trouble with my login form validation using jQuery. Can someone help me fix it? $(document).ready(function() { $("#form1").validate({ rules: { username: { required: true, minlength: 6 }, password: { ...

htmljquerycss

Break the line after every space in words within an element

I have a table/grid view with two words in the <td> like "C2 Sunday". I need a line break after C2 so that it appears as: C2 Sunday Is there a way to achieve this? Please assist me with this issue. Currently, it is showing as "C2 Sunday" and I wou ...

htmlcssasp.netgridviewhtml-table

Tips for implementing and utilizing onclick functions in EJS

My goal is to develop a trivia game with interactive features. I aim to enable users to click on an answer, which will trigger a border effect and increase the points variable. Below is the layout of the entire page: <% include ../partials/boilerp ...

javascripthtmlcssexpressejs

When attempting to use the jsonify method on a variable within an html file, the output is not displayed

Is it possible to store "jsonify" in a variable? I find the pure json format of "return jsonify(data)" unappealing, so I am looking for a way to enhance it using an HTML template with proper indentation. Here's the python code I have: from flask impo ...

pythonhtmljsonflask

PHP code failing to save form information into database

I am experiencing difficulties with inserting form data into my database. The connection to the database is successfully established without any errors, but no information is being entered. Below is my code - any assistance would be greatly appreciated. ...

phphtmlmysqlsqlphpmyadmin

Can you explain the process of selecting a SubMenu Item that is a hover link in IE using C# and Selenium?

I have been scouring various topics on Stack Overflow and other platforms for days in search of a solution to my problem, but so far, I have had no luck. I am facing an issue with automating a website using C# Selenium where Webdriver is unable to click on ...

htmlseleniumxpathmenu

Tips on updating a specific value within an element stored in an array

I'm currently in the process of setting up a table where each row contains unique values. Using a for loop, I am able to generate these rows and store them in an array. Now, my question arises when I consider modifying a particular value with the id " ...

javascriptjqueryhtmlcss

Tips for aligning one item in the center and another item on the right with MUI v5

My goal is to center 3 navigation tabs in the middle of my page and have a dropdown on the far right for sorting. I managed to get the dropdown on the far right, but I'm having trouble perfectly centering the 3 navigation tabs inside the <Box> & ...

cssreactjsflexboxmaterial-ui

Comparison of universal and descending selector in CSS

Can someone clarify when to use the universal selector versus the descendant selector in CSS? I've tried finding a clear explanation, but haven't come across one that explains the difference and when each should be used: div * .test{ color: re ...

htmlcsscss-selectors

Attempting to update the content of a specific div element on a webpage without disrupting its current position

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ajax div example</title> <script type="text/javascript" src="jscripts/jquery-1.6.4.min.js" ...

ajaxhtmlpositionrefreshcss-float

Controlling Material-UI using a custom .css stylesheet

Are there alternative methods for customizing Material-UI components using CSS stylesheets? I'm aware of the {makeStyles} method and JSS overrides, but I find it messy in the code and confusing when trying to modularize it in other files. Is there a ...

javascriptcssreactjsdesign-patternsmaterial-ui

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

javascriptjqueryhtmlcss

What is the best way to extract text from a list item in an unordered list (

I am trying to search a ul list that populates a ddSlick dropdown box. ddSlick adds pictures to list items, making it a visually appealing choice. To see more about ddSlick, you can visit their website here: Here is the code I am using to loop through the ...

javascriptjqueryhtmlhtml-lists

Turn off automatic resizing of iframes

I'm currently dealing with a webpage that contains an iframe. The iframe contains quite a bit of data, and every time it loads, its height adjusts to match the content within. Unfortunately, this is causing my page layout to be disrupted. Is there a w ...

htmlcssiframescroll

Retrieve the hidden input values from a div using jQuery

Currently, I am in the midst of a project using CakePHP with jQuery and AJAX. Within this project, I have a div that is being repeated in a PHP loop. Here is what the div looks like: <div class="heart"> <input type="hidden" i ...

jqueryhtml

Choosing the image that represents your website in Safari web previews

Every time I check iCloud.com on my Safari top sites, the thumbnail is always the same. I'm curious about how I can automate this for my own website. ...

javascripthtmlcss

Unable to transmit HTML emails

I've been encountering an issue while trying to send HTML emails using Gmail SMTP from CI. It seems that my emails are being rejected if they contain any tables. Interestingly, there is no error message provided; the emails simply do not show up in my ...

phphtmlemailcodeigniter

Extract the content from the span element on Whatsapp Web

Currently, I am in the process of learning Python along with Selenium and have encountered a challenge. I am attempting to extract the username from the most recent message in a WhatsApp group conversation. Despite several attempts, I have been unsuccessfu ...

pythonhtmlcssseleniumselenium-webdriver