What is the best way to create a scroll bar within a table while ensuring that the rows expand to fill the entire width?

Question

What is the best way to create a scroll bar within a table while ensuring that the rows expand to fill the entire width?

I am attempting to design a table with 4 columns and a minimum of 12 rows while utilizing overflow-y:scroll. The webpage is completely responsive. I understand that in order to incorporate a scrollbar into the table, I must specify display: block for both thead and tbody. However, I am encountering an issue where I cannot get my rows to have a width of 100%. I have spent several hours trying to adjust my code without finding a solution. You can view the code on the following jsfiddle link:

https://jsfiddle.net/kuau4ace/ ` I am only using HTML and CSS for this project.

Any assistance would be greatly appreciated! <table>

html css scrollbar

Answer 1

Answer №1

When you set thead and tbody to display:block, it changes the property of the table, causing the tr not to take up 100% width.

Give this code a shot

$(document).ready(function(){
   var body=$('.template_table').clone();
   body.addClass('body');
   $('.table-wrapper').append("<div class='table-body'></div>");
   $('.table-body').append(body);
   var curr = [];
   $("table.body th").each(function(i) {
var tColumnWidth = $(this).width();
curr.push(tColumnWidth);
   });
   $("table:first-child th").each(function(i){
   $(this).width(curr[i]);
   });
   $("table.body thead").empty();
   $(".table-wrapper>table tbody").empty();
});

.template_table{
    border:1px solid #000;
    width:100%;
    padding: 0;
}
.template_table thead{
    background:#323333;
    height: 30px;
    width: 100%;
}
... (CSS code continues)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="table-wrapper">
<table class="col-xs-12 template_table">
                                ... (HTML code continues)
                            </table>
                            </div>

Answer 2

When you set thead and tbody to display:block, it changes the property of the table, causing the tr not to take up 100% width.

Give this code a shot

$(document).ready(function(){
   var body=$('.template_table').clone();
   body.addClass('body');
   $('.table-wrapper').append("<div class='table-body'></div>");
   $('.table-body').append(body);
   var curr = [];
   $("table.body th").each(function(i) {
var tColumnWidth = $(this).width();
curr.push(tColumnWidth);
   });
   $("table:first-child th").each(function(i){
   $(this).width(curr[i]);
   });
   $("table.body thead").empty();
   $(".table-wrapper>table tbody").empty();
});

.template_table{
    border:1px solid #000;
    width:100%;
    padding: 0;
}
.template_table thead{
    background:#323333;
    height: 30px;
    width: 100%;
}
... (CSS code continues)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="table-wrapper">
<table class="col-xs-12 template_table">
                                ... (HTML code continues)
                            </table>
                            </div>

What is the best way to create a scroll bar within a table while ensuring that the rows expand to fill the entire width?

Answer №1

Similar questions

Tips for creating a Carousel with more than three images using Bootstrap

Jquery Fails to Execute When Clicking on Radio Button

Presentation and selection list

Using @at-root seems to be causing an error when combining the "a" selector with

Removing or hiding elements using jQuery

Unable to modify the color of the alert notification in JavaScript using React

Responsive Alignment of Slanted Edges using CSS

What methods can be utilized to implement automatic location detection on a website using HTML5?

Tips for expanding an md-nav-item in Angular Material

Overlap of Bootstrap Columns Occurs When Resizing the Browser

Using jQuery to apply CSS with relative percentage values (+=/-=/)

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

Designing a flexible layout that allows for both vertical and horizontal scrolling of content

Create a scrollable div within a template

Utilizing AngularJS to display an array of user inputs

What is the best way to incorporate a linear gradient into the background image using bootstrap?

Click the link to capture the ID and store it in a variable

Struggling to make jQuery apply .css("display", "block") upon clicking a link

Apply border-radius to the group of columns in CSS

jQuery scrollTop animates to the start of the webpage