What is the best way to create a Table with a Scroll feature and a fixed Header using CSS code, ensuring it looks sleek and functional across all devices, including smartphones?

I needed a CSS code for my Asp.Net Core Code that would apply to multiple tables. The desired style should include a fixed table header with a scrollable body, ensuring alignment between rows and columns. Despite trying various alternatives, I couldn't find a suitable solution. The codes I tested either misaligned the header with the columns below or failed to adjust column widths properly.

After some trial and error, I developed this style code:

<style>
    * {
        box-sizing: border-box;
    }

    .wrapper2 {
        height: 30vw;
        overflow-y: scroll;
    }
    
    (The rest of the original CSS styling code goes here...)

The HTML View code snippet includes:

<div class="container">
    <div class="card level-3">
        <h3>Blablabla</h3>

        <div class="tablealign">
            (Original HTML table content goes here...)
        </div>
    </div>
</div>

You can view how the table looks on the website through the following links: https://i.sstatic.net/uoSZ5.png https://i.sstatic.net/boAK3.png

Although the current setup works adequately, I am seeking improvements in the width adjustment of the header and column text. When the table is viewed on a mobile device, it appears as follows:

https://i.sstatic.net/DmDyT.png

This presentation on a cellphone is suboptimal. I am open to suggestions on optimizing the code for achieving the desired table layout while ensuring a responsive design. Any assistance would be greatly appreciated. Thank you for your time and willingness to help address this issue.

Answer №1

To achieve a responsive table design, you can utilize the table-responsive class in conjunction with Bootstrap.

 <div class="table-responsive-sm tablealign">
     ...

Next, adjust the table-layout property to auto, set the minimum width for .table th, and tweak the overall widths of both .table and the scrollbar. Below is the complete style guide.

   <style>
    * {
        box-sizing: border-box;
    }

    .wrapper2 {
        height: 30vw;
        overflow-y: scroll;
    }

    .card {
        background-color: #fff;
        border-radius: 10px;
        margin: 10% auto;
        position: relative;
        padding: 34px;
        color: #444;
        cursor: pointer;
        overflow-x: auto;
    }
        
        .card:before {
            display: block;
            position: absolute;
            background-color: #ccc;
            z-index: -1;
            box-shadow: 0 0 40px #999999;
            transition: box-shadow .2s ease-in-out;
        }

        .card.level-3:hover:before {
            box-shadow: 0 0 80px #999999;
        }

    .table {
          border-collapse: collapse;
          width: 95%;
    }

        .table td {
            overflow: hidden;
            word-break: normal;
            text-align: center;
        }

        .table th  {
            text-align: center;
            word-break: normal;
            min-width: 100px;
        }
    .tablealign {
        float: right;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        padding-bottom: 50px;
    }

    tbody {
        overflow-y: auto;
        overflow-x: hidden;
        height: 336px;
        display: block;
      }
      tbody::-webkit-scrollbar {
          width: 0;
      }
      thead {
          display: table;
          width: calc(100% - 17px);
          table-layout: auto;
      }

      tbody tr {
         table-layout: fixed;
         display: table;
         width: 100%;
      }

      div.c {
           line-height: 1%;
      }
    
</style>

https://i.sstatic.net/ydLcb.gif

https://i.sstatic.net/p5IB6.png

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

Align the content at the center within a Bulma column

I am working with multiple columns, each column containing a circle in the CSS depicted as a font awesome icon centered within it. However, I am facing an issue where the circle remains aligned to the left while the text itself gets centered. HTML <di ...

Achieving a consistent user experience across both mobile and desktop devices without using a separate mobile version or media queries

Is it possible to have the same URL website.com display completely different content depending on whether it is accessed from a mobile device or not? I am looking for a solution that does not involve using CSS media queries or creating a separate subdomai ...

Can you guide me on implementing a transition animation through class toggling?

I am facing an issue where certain elements need to be highlighted or unhighlighted conditionally. To achieve this, I have assigned a class called highlight to the elements that require highlighting with a transition animation. The challenge arises when t ...

Using jQuery to apply a CSS border to an image within a textarea

Working with TinyIMCE, I am looking to incorporate a border around all images within the textarea whenever a user submits the form. $("form").submit(function() { var content = $("#edit-message1-value").val(); // Afterwards, I want to manipulate the cont ...

having difficulty selecting a list item within the <nav> and <ul> tags using Selenium WebDriver

Within the nav tag, there is a list of elements. The goal is to click on the first element in the list. Below is the given HTML: <aside id="left-panel" style="overflow: visible;"> <div id="selectedBrand" class="custum-brand-info login-info"> ...

Connecting HTML pages on two different drives on the same computer: Is it possible?

Is it possible to create hyperlinks between HTML pages located in two different folders on separate drives (for example, one in Drive:C and another in Drive:E) on the same computer? I can navigate up multiple directories and to different folders or subfol ...

What is the best way to incorporate right side padding into a horizontal scroll?

I'm attempting to include padding on the right side of a horizontal scroll so that the last item in the scroll appears in the center of the screen. Here's what I have tried so far. While the left padding works perfectly, I'm puzzled as to w ...

Is there a way to change HTML retrieved from an AJAX request before inserting it into the document?

I am utilizing an ajax call to retrieve an HTML page from the server; the ajax call is structured as follows: function loadHtml() { $.ajax({ type : 'GET', async : false, url : &apos ...

My PHP script is not functioning correctly with Ajax

I am currently working with HTML5, PHP, and JavaScript. My goal is to implement Ajax in order to display the sizes of a selected product when an option is chosen from #productoSeleccionado. However, I believe that there may be an issue with my code as the ...

Leverage flex columns in Bootstrap 4.0 for advanced layout options

Hey, I need some assistance to set up columns in my code. Here's the current code snippet: <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div ...

What can I do to resolve the problem with td border

Check out my website over at browsethewebclean.com I've come across a peculiar issue with the borders and background color of some nested tables on my page. It seems that the border is not aligning properly and the background color goes beyond the im ...

Direct your attention towards the specific target div element using the get function

I need assistance with a webpage where items are listed using unique ids. I want the page to scroll up or down, depending on which link the user clicks, to find the element with the id specified in the address bar as foo=or2. Additionally, I would like the ...

Progress Bars Styled with CSS Percentages

I need help creating a basic CSS percentage bar. To get started, visit and paste the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w ...

Issue with importing styles within a media query

I am having trouble importing a style that is based on a media query. When I try to import the styles, it doesn't seem to work. However, if I directly include the styles within the media query itself, they show up on the page. For reference, you can ...

Ways to Halt Every Single CSS Animation

Is there a way to stop all CSS animations in a document from the beginning? My idea is to assign a class to elements containing CSS animations at the start, such as '.paused'. Then, using jQuery in my JavaScript, I would remove the '.paused& ...

Troubleshooting a positioning issue in an ExtJs Grid due to a CSS conflict

After integrating the ExtJs Grid into my existing webpage, I encountered a CSS conflict. The conflicting CSS was identified in my current stylesheet, but unfortunately I am unable to modify it as the entire website is built upon it. Attempts with ctCls, b ...

Tips for preventing harmful messages in a chat room app

As I am working on a chat room website, users are able to input any content they want into the entry field and then send it to all online users. However, I have concerns about security - what if malicious individuals try to inject harmful HTML or JavaScrip ...

Display the changing value at the beginning of the drop-down menu

I'm currently working on an AngularJS forEach loop where I need to display a dropdown list with dynamic values. The goal is to have the value stored in $scope.showCurrentProgram as the first selected element in the dropdown list when the page loads, a ...

What is the best way to redirect a URL parameter that contains "?m=1"?

After transitioning from blogger to wordpress, I've noticed that many incoming links now have a "?m=1" parameter added to the end of my post link. For example: http://www.example.com/2015/06/name-of-blog-post.html?m=1 I've tried searching for ...

Stop unwanted overrides of CSS3 blinking background colors

I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...