The alignment of the table header and body becomes misaligned when attempting to freeze the header

I am currently working on making the header visible while scrolling down the page.
I managed to achieve this by using display:block; in the CSS for the body element.
However, I am facing an issue where the columns of the header are not aligned with the columns in the body section.
I have tried several solutions but haven't been able to correct this misalignment.
My current setup involves using Bootstrap classes (e.g., col-xs-12 col-lg-2 col-xl-2 for username, ...) for better layout.
Additionally, it would be great if the table could adjust to the scrollbar dynamically.

<div class="container">
            <t:grid
                source="users"
                class="table list-user thead-inverse table-hover"
                inplace="true"
                cellDecorators="cellDecorator"
                rowDecorators="rowDecorator"
                t:mixins="GridDecorator"
                model="modelUserList"
                row="user"
                pagerPosition="both"
                renderTableIfEmpty="true">
                <p:inventoryCell> 
                    ${inventoryString}
                </p:inventoryCell>
                <p:actionsCell>
                    <t:actionlink
                        t:id="editUser"
                        context="user.id"
                        t:zone="userEditZone">
                        <i class="icon-md ion-android-settings" />
                    </t:actionlink>
                    <t:if test="notSelf">
                        <t:actionlink
                            t:id="deleteUser"
                            t:mixins="confirm"
                            t:message="Are you sure you want to delete ${user.fullname}?" page="index"
                            context="user.id">
                            <i class="icon-md ion-trash-b" />
                        </t:actionlink>
                    </t:if>
                </p:actionsCell>
                <p:lastloginCell>${lastlogin}</p:lastloginCell>
            </t:grid>
        </div>



#userlist table .row
{
    margin-right: 0rem;
    margin-left: 0rem;
    table-layout:fixed; 
    text-overflow: ellipsis;

/*  flex-wrap:unset;*/
}

#userlist thead {
    display: inline;
}

#userlist tbody {
    display: block;
    height: 44.25rem;
    overflow: auto;
}
#userlist table .row td {
    word-break: break-all;
    border: none;
}
#userlist table .row th, #bestandlist table .row th {
    border: none;
    text-overflow: ellipsis;

}



<div data-container-type="zone">
   <table class="table list-user thead-inverse table-hover">
      <thead>
         <tr class="row hidden-md-down" data-inplace-grid-links="true">
            <th class="col-xs-12 col-lg-2 col-xl-2" data-grid-column="first" data-grid-column-sort="sortable" data-grid-property="username"></th>
            <th class="col-xs-12 col-lg-2 col-xl-2" data-grid-column-sort="sortable" data-grid-property="email"></th>
            <th class="col-xs-12 col-lg-2 col-xl-2" data-grid-column-sort="sortable" data-grid-property="userFunction"></th>
            <th class="col-xs-12 col-lg-2 col-xl-1" data-grid-column-sort="sortable" data-grid-property="lastLogin"></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column="last" data-grid-property="actions">Actions</th>
         </tr>
      </thead>
      <tbody>
         <tr class="row" data-grid-row="first">
            <td class="col-xs-12 col-lg-2 col-xl-2" data-grid-property="username"></td>
            <td class="col-xs-12 col-lg-2 col-xl-2" data-grid-property="email"></td>
            <td class="col-xs-12 col-lg-2 col-xl-2" data-grid-property="userFunction"></td>
            <td class="col-xs-12 col-lg-2 col-xl-1" data-grid-property="lastLogin">&nbsp;</td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property="actions"></td>
         </tr>
      </<tbody>
   </table>
</div>

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

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

htmlcssbootstrap-4tapestry

Answer №1

After experimenting with your code and Bootstrap 3.3.7, I noticed that the table header and body columns aligned perfectly. However, it's important to note that I used dummy data since actual table data was not provided. Even though the alignment appears fine with Bootstrap 3, it seems that some Bootstrap classes are being misused.

The row and col classes in Bootstrap are not intended for HTML tables. While they may seem to work in this particular case, it is more accidental than correct usage. HTML tables have their own structure and behavior, and while Bootstrap can style them nicely, it does not make them responsive like regular div elements.

In terms of responsiveness, the most Bootstrap can do for an HTML table is add a horizontal scrollbar at the bottom. This is because tables are designed for tabular data, and manipulating individual cells as easily as divs would disrupt the entire table layout.

If my explanation is unclear, please feel free to ask for further clarification.

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

JavaScript: Retrieving the names of children within a <div> element

Within my structure setup, there is a tower div with inner elements like this: <div class="tower"> <div class="E0">abc</div> <div class="GU">123</di </div> The challenge I am facing is that I need to access the in ...

javascripthtmlclass-names

Creating a dynamic page footer for a PDF document using Rotativa's content generation capabilities

As I work on generating a PDF, my employer has requested that I add a footer to each page of the document. Currently, the PDF is being created using Rotativa, where an HTML page is converted into a PDF. However, I am facing a challenge in determining the ...

c#htmljquerycssrotativa

I recently installed Bootstrap 5 and jQuery 3.6 on my website, but I'm encountering an issue where the dropdown button is not functioning properly when I try to embed them. Could there be

I have this code: I recently downloaded Bootstrap 5 and JQuery 3.6, but I am facing an issue where the dropdown button is not working when I embed them in my project. Can you take a look at my code to see if anything is missing? <head> <ti ...

htmljquerycssbootstrap-4

Having trouble getting my HTML file and CSS styles to render properly in Chrome

Currently, I am in the process of developing a website and facing challenges with displaying CSS properties accurately. Despite seeking input from friends and users, my HTML file is not rendering as expected within various browsers such as Chrome, Edge, an ...

javascripthtmlcssbootstrap-4

Reveal and conceal information with a customized web address

I have a PHP and MySQL blog that I want to display in a div using show and hide JavaScript functions. Everything works fine with other divs, but the issue arises when clicking on a vanity URL causing my webpage to refresh every time it's clicked. The ...

javascriptphpjqueryhtmlvanity-url

Identifying when the mouse cursor changes on a website

Is there a way to detect when the mouse cursor changes as it hovers over different page elements? An event similar to this would be ideal: window.onmousecursorchange = function(e) { // e would provide information about the cursor // for example, ...

javascripthtmlnode.jsdom-events

I found myself pondering the method to achieve the slightly blue tinted box that sits behind the image

Can you assist me in achieving this specific look? I have my MUI app bar and home page set up, but I'm unsure how to create the blue-ish box behind the image. Should I place the container within my app bar or integrate it into my homepage file? Additi ...

cssreactjsmaterial-ui

Using justify-content-between in a div container with only two items will not produce the desired effect

I'm having trouble aligning two elements on opposite ends of a div container using Bootstrap's justify-content-between class. The h4 element is not on the left and the button on the right as expected. I am using Bootstrap 5.2.3. Can anyone help m ...

htmlcsstwitter-bootstrapbootstrap-5

When a radio button is clicked in Angular7 and it shares the same form control name, both radio buttons are being

Visit this StackBlitz link for more information. places = ['effil tower','new discover'] new FormGroup({place: new FormControl()}); <div *ngIf="places?.length > 0" class="col-12"> <div style=" padding-top: 1e ...

javascripthtmlangularselectradio-button

How to Ensure the Final Column in an Angular Bootstrap Row Occupies the Remaining Available Space

Within my Angular5 application, there is a container component used to display a row with multiple components arranged in n columns, as shown below: <div class="row mx-5 my-5 h-75 w-80"> <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advanc ...

cssangulartwitter-bootstrap-3responsive-designbootstrap-4

Looking to extract the hidden value from an HTML input field using Selenium

Unable to retrieve the value of a hidden element in HTML, even though it is displaying. Seeking assistance in accessing the value despite the type being hidden. <input type="HIDDEN" label_value="Sub Reference" title="Sub Reference" id="ACC_NO" dbt="BK_ ...

javahtmlseleniumselenium-webdriver

Interested in incorporating owl carousel, however

Currently, I am in the process of designing a website using Django and Bootstrap. I have extended base.html into index.html for my project. The base.html file includes a navbar from Bootstrap, while I aim to implement an owl carousel in the index.html file ...

djangobootstrap-4owl-carousel-2

Materialize CSS is throwing an error: 'velocity is not a function'

Encountering an issue with Materialize CSS. A JavaScript error appears 'I('.velocity is not a function', for certain actions. For instance, clicking the collapse icon on the sidenav results in e.velocity is not a function error. Similarly, u ...

javascripthtmlcssmaterialize

Tips for creating a wide mobile menu

I am attempting to make the mobile menu full width, but so far my efforts have been unsuccessful. #menu-main-2 { background-color:#FFFFFF !important; padding-left:15px; max-width: unset; width: 100%; } view mobile menu ...

csswordpress

How can I match dates in order to run the following code?

If Purchase Date is after 31/Mar/xxxx it should not calculate elap_yend, rem_days, depre_cur, cur_wdv. Also I have to calculate GST with some options that is if SGST and CGST are chosen, I should not calculate IGST else if IGST selected or marked it shoul ...

javascriptjqueryhtmlajax

Issues with displaying ngAnimate animations

For the past 10 hours, I've been attempting to get my animations to function properly. It seems that they only work when I include the animate.css stylesheet and use the "animated classname". However, when I try to create custom entrance and exit anim ...

javascriptcssangularjsng-animate

The HTML modal closing button is unresponsive and the contents inside are misaligned, causing functionality issues

I've searched through similar questions, but none of the suggested solutions seem to work for my issue. The problem I'm facing is that the closing button on my modal isn't functioning properly and the content inside it is not aligning corre ...

htmlcssmodal-dialog

Extract the content of an element and incorporate it into a script (AddThis)

HTML: <div id="file-section"> <div class="middle"> <p class="description"> Lorem ipsum... </p> </div> </div> jQuery: var share_on_addthis = { description: $('#file-section ...

javascriptjqueryhtmlcss

Step-by-step guide on positioning an image to show at the bottom of a div

I am trying to create a div that covers 100% of the screen height, with a table at the top and white space below it for an image. However, when I add the image, it ends up directly under the table instead of at the bottom of the DIV. I have searched on G ...

javascriptjquerycss

Determine the hue of the scrollbar

My web page features a customized vertical scrollbar within a div box, and I have managed to create a horizontal scrollbar using CSS and jQuery. Now, I am looking for a way to match the color of the custom horizontal scrollbar with the rest of my design. ...

jquerycsscolorsscrollbar