Is there a way to create a Bootstrap table that is responsive and includes a

I have a bootstrap table and I am trying to display the contents of a database in its tbody. However, I am facing an issue with achieving a responsive vertical scroll only within the tbody while keeping the header fixed. I have experimented with CSS by setting the tbody to display:block with overflow:auto, which somewhat works. The problem is that the widths of the cells in the thead become shorter than the tbody cells.

Is there a specific Bootstrap class that can help me achieve this?

tbody{
max-height: 10vh;
overflow: auto;
}
<html>
<head>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcfc2c2d9ded9dfccdded98839d839c">[email protected]</a>/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr><th>User</th><th>Action</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>TESSSSSSSSSSST</td><td>TESSSST</td><td>T</td></tr>
...
</tbody>
</table>    
</div>
</body>
</html>

csstwitter-bootstrapbootstrap-5bootstrap-table

Answer №1

To implement a sticky header, you can utilize the sticky-top class and designate the div container as the scrolling element using a custom class.

By applying the clamp() function, you can establish a minimum height within your max-height rule to ensure visibility of at least one row. Additionally, adding a white background can effectively conceal the content that scrolls behind it.

Here's a potential example leveraging mainly Bootstrap classes:

.tbodyDiv{
max-height: clamp(5em,10vh,250px);
overflow: auto;
}
<html>
<head>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6c6b7958582d36">[email protected]</a>/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX39kmjitSecKgetw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
Hello, I'm a sticky header.
<div class="tbodyDiv">
<table class="table table-bordered table-striped text-center">
<thead class="sticky-top bg-white">
<tr><th>User</th><th>Action</th><th>Date</th></tr>
</thead>
…
— additional rows and data here —
…
</tbody>
</table>    
</div>
</body>
</html>

Answer №2

After writing this code, I finally found the solution to my problem. It may seem strange and illogical at first glance. I thoroughly tested it on both Chrome and Firefox, and everything seemed to be in order.

I am utilizing bootstrap 5 for this project.

table {
    display: block;
    overflow: auto;
}
thead>th, tbody tr, tbody>tr>th>{
    display: table;
    width: fit-content;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
table {
    width: 185px;
}

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

Issue with Firefox: Click event not triggered when clicking on CSS pseudo element

Check out my custom-made button: <button class="btn-close">Close alert</button> Here's the CSS styling for the button: .btn-close{ position: relative; height: 30px; border: none; background-color: #332b2a; color: #ff ...

jquerycssfirefoxonclickpseudo-element

Having issues with Bootstrap flip div not functioning properly when clicked on a mobile device?

I am currently working on a website and encountering an issue. Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/ The objective is to flip a div when a button is clicked. The button responsible for flipping the div resides in both the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best strategy for positioning an anchor element within a list item using JSX or Bootstrap in a way that maximizes efficiency?

I have the following code snippet <li className = "list-group-item list-group-item-success" key ={todo.id}>{todo.text}<a style="float:right;" onClick={() => props.onEdit(todo)} className="edit-todo glyphicon glyphicon-edit" href="#"& ...

cssreactjsbootstrap-4

The http url on an iPad in the src attribute of an HTML 5 video tag is malfunctioning

Having trouble loading a video on iPad using an http URL in the src attribute of an HTML5 video tag. Both static and dynamic approaches have been attempted, but it works fine on web browsers. Here is an example of the code: Static: <!DOCTYPE html ...

javascriptcsshtml

Enhancing productivity with a more streamlined process for creating a responsive website design through the optimization of

I recently had the task of placing two images in a band on a webpage and ensuring they were responsive to different screen sizes. Image 'a' represented a circular logo, while image 'b' was a rectangular logo. The red band served as the ...

cssresponsive-designworkflow

JavaScript for controlling first-person movement with a mouse

Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...

javascriptjquerycss

How to send parameters to Bootstrap modal using a hyperlink

I need help confirming the deletion of a datatable row using a Bootstrap modal dialog. When a user clicks on the delete link, I want a modal to appear asking for confirmation. Here is my code: <c:forEach items="${equipes}" var="equ"> ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

How to change the display property in CSS from block to none using React

Just started diving into React, and I am struggling with making the content disappear when clicking a button. Tried using state and even checked out https://jsfiddle.net/uwadhwnr/, but nothing seems to work. Feeling quite frustrated at the moment. <div ...

cssreactjs

Experiencing issues with exporting <SVG> file due to corruption

I received some downvotes on my previous post, and I'm not sure why. My question was clear, and I provided a lot of information. Let's give it another shot. My issue is with exporting <SVG> files from an HTML document. When I try to open t ...

javascripthtmlcsssvg

focusing on every item within a container

Currently, my code looks like this: $(".container a").css("color","#ffffff"); It styles all links inside the ".container" element to be white. However, I have a div that has the following structure: <div class="container"> <div class="header" ...

javascriptjqueryhtmlcss

Breaking the layout using recursive components in VueJS

I am currently facing an issue where I need to dynamically load components. However, when some of these components are loaded, they appear with faulty or missing CSS styles due to a problematic first div element after the template. Removing this DIV manual ...

htmlcssvue.jsvue-component

The primary section does not occupy any vertical area

I am currently working on a new design that includes a header, side menu, and footer within the main section. My goal is to have the main section fill the remaining space with a minimum height, pushing the footer to the bottom of the page. I want the mai ...

csstwitter-bootstraplayoutflexboxbootstrap-5

Stop jQuery from resetting the background image when using fadeOut()

Currently, I am using fadeIn and fadeOut functions with jQuery to create a fading effect. However, when the final fade out occurs, the entire CSS table fades out and the background image of the CSS body comes into view. Despite setting the background-posit ...

jqueryhtmlcssweb

Conceal a hidden element underneath a see-through layer featuring an adaptable background image spanning the entire webpage

Is there a way to create a "title bar" with text only, that stays fixed on top and the content below scrolls underneath it? Additionally, is it possible to make the title bar transparent for the background but not for the content below it? Also, can the s ...

css

Changing the style.backgroundImage property overrides any image transition effects

I am currently working on creating a button for a player. You can check out the video (here) The button works, but in order to give it a "pressed" effect, I have to change its background-image on click. However, this action seems to override the transitio ...

javascripthtmlcsscss-animationscss-transitions

The presence of a Bootstrap addon is resulting in horizontal scrolling on mobile devices within the webpage

I am encountering a peculiar issue with an input-group in my cshtml file which features a Bootstrap addon. The problem arises on mobile devices, where upon focusing on the input field, the page scrolls horizontally to the right, revealing the right margin ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

"Is it possible to keep an eye on two different events and take action once they both

I have a menu with different submenus for each list item, all utilizing the same background tag. Currently, when one submenu is open and I hover over another list item, the previous submenus hide and the new one opens. What I want is for the content to cha ...

javascriptjqueryhtmlcss

Configuring Google Maps API (including charts) for maximum height of 100%

I am having trouble getting my map to display at 100% height using the Google Maps API. I've encountered similar issues in the past with the Google Charts API as well. From what I've gathered, it seems like setting the height of the html and bod ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Unable to access the jumbotron in Angular with Bootstrap 5

Recently, I set up a brand new Angular installation and included Bootstrap 5 using the following command: npm install bootstrap --save After that, I updated the lines in the angular.json file to: "styles": [ "node_modules/bootstra ...

cssangularbootstrap-5

How can I style a submit form button with a custom background image?

I'm struggling to apply a background image to my submit button within a form. Despite trying different methods, I keep getting the default browser button. Can anyone pinpoint where my mistake might be? HTML <div id="headerSearch"> <form ...

htmlcss