Fixed table header bootstrap to top when scroll down năm 2024

When using the sticky header I can see when scrolling part of the background row, and it looks kind of bad.

My table is defined as:

Also, setting the height to something like calc[100vh-100px] does not work.

Expected behavior

The background row should be completely hidden behind the header. I only found this to be an issue on chrome.

Versions

Libraries:

• BootstrapVue: ^2.0.0-rc.28
• Bootstrap: ^4.3.1
• Vue: ^2.6.10

Environment:

• OS: Windows 10
• Browser: Chrome 76.0.3809.132

The text was updated successfully, but these errors were encountered:

Apply the no-border-collapse prop to your b-table to solve this issue.

From the notes:

Bootstrap v4 uses the CSS style border-collapse: collapsed on table elements. This prevents the borders on the sticky header from "sticking" to the header, and hence the borders will scroll when the body scrolls. To get around this issue, set the pop no-border-collapse on the table [note that this may cause double width borders when using features such as bordered, etc].

Apply the no-border-collapse prop to your b-table to solve this issue.

From the notes:

Bootstrap v4 uses the CSS style border-collapse: collapsed on table elements. This prevents the borders on the sticky header from "sticking" to the header, and hence the borders will scroll when the body scrolls. To get around this issue, set the pop no-border-collapse on the table [note that this may cause double width borders when using features such as bordered, etc].

Yeah sorry I should have mentioned that I tried that and it did not work:

Behaves the same in chrome for me.

no-border-collapse does fix the issue on v2.0.1 but it also makes the borders double as thick... taking the bordered off is not an option. Any workaround?

No easy option then otherwise re-defining how Bootstrap's SCSS/CSS defines the bordering [since it was designed for border-collapse: collapsed.

You could make your own class that targets, say, the right edge and bottom edge of table cells only and adds a border of 1px.

With the help of a couple of CSS classes, you can easily create fixed headers for your responsive tables with Bootstrap 4 or 5.

In this short tutorial, I will show you how to create such sticky headers for your table. You can scroll the table contents and the header will remain in its place.

The table with its sticky header will be responsive and nicely displayed on smaller viewports. The code is easy to implement and customize to meet your specific needs.

Alright, let's do it!

Step-by-step Instructions

• don't forget to wrap your fixed table header row in a thead wrapper
• we limit tbody height to 300px [add your value] and set overflow-y to scroll. All this is done in CSS.
• then to make everything work, we have to set the table's rows and cells to display: block and float: left

When to use a table with a fixed header in web design?

When you need to display data in tabular form, it is better if you can do it in a table with a fixed header. This is because it makes the content easier to read and understand.

A table with a fixed header could be used to display data usually found in an Excel sheet or database. The information can be easily arranged into columns and rows. It is also easy to identify the main content of each column.

If you liked this snippet, you might also enjoy exploring Bootstrap vertical menu or Bootstrap Multiselect Dropdown .

Please note that the interactive editor on this page should be viewed on your laptop or desktop for the best results.

How to make a table header fixed while scrolling?

To get the header to stay in place when scrolling, you can use CSS position: fixed; property on the header element. This will allow the header to stay at the top of the page, even when the user scrolls up or down the page.nullHow to make a header stay in place when scrolling with CSS - SheCodeswww.shecodes.io › athena › 27153-how-to-make-a-header-stay-in-place-w...null

How do I keep the header fixed while scrolling in CSS?

The header component needs to be turned into a top-level container, with z-index: 1; and position: fixed; In this way it will remain sticky at the top when you are scrolling.nullHow to make a fixed header when scrolling? - TeleportHQ Help Centerhelp.teleporthq.io › article › how-to-make-a-fixed-header-when-scrolling-1...null

How to freeze a header in Bootstrap?

In the CSS file: .header{ position:sticky; top: 0 ; } .

In HTML file: .

How to make the table header sticky in CSS?

Make the column header row, feature row headers, and mobile column group text sticky using “position: sticky” Once you have wrapped the table in an

and styled it as previously described, we need to style the table headers with position:sticky, left:0, and z-index:10.nullSticky Comparison Table Header and First Column - Launch Hub Studiolaunchhubstudio.com › blog › sticky-table-headersnull