The fixed table header is misaligned with the body columns' width

I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the width of the table while keeping it centered on the page?

thead, tr, th, td, tbody{
border: 1px solid;
text-align: center;
padding: 3px;

}

th{
background-color:#99ccff;
height: 40px;
font-size: 20px;

}

tr{
width: 500%;
height: 20px;
font-size: 17px;
}

tr:nth-child(even) {
background-color: #CCFFFF;
}
tr:nth-child(odd) {
background-color: #fae8d1;
}

thead{
position: fixed;
width: 1200px;
}
.tbldiv{
width: 1200px;
height: 600px;
border: 2px solid;
overflow: auto;
}
<div class="tbldiv">
<table class="scroll">
<thead>
<tr>
<th class="col-md-2">Name</th>
<th class="col-md-2">Birthday</th>
<th class="col-md-2">Gender</th>
<th class="col-md-2">Marital</th>
<th class="col-md-2">Address</th>
<th class="col-md-2">Telephone</th>
<th class="col-md-2">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
</tbody>
</table>
</div>

htmlcsshtml-table

Answer №1

Give this code a shot

Replace position with translate

$(".tbldiv").scroll(function(){
  var translate = "translate(0," + this.scrollTop + "px)";
  $('thead').css('transform',translate);
});
thead, tr, th, td, tbody{
border: 1px solid;
text-align: center;
padding: 3px;

}
table.scroll {
    table-layout: fixed;
}
th{
background-color:#99ccff;
height: 40px;
font-size: 20px;

}

tr{
width: 500%;
height: 20px;
font-size: 17px;
}

tr:nth-child(even) {
background-color: #CCFFFF;
}
tr:nth-child(odd) {
background-color: #fae8d1;
}

.tbldiv{
float:left;
height: 200px;
border: 2px solid;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="tbldiv">
<table class="scroll">
<thead>
<tr>
<th class="col-md-2">Name</th>
<th class="col-md-2">Birthday</th>
<th class="col-md-2">Gender</th>
<th class="col-md-2">Marital</th>
<th class="col-md-2">Address</th>
<th class="col-md-2">Telephone</th>
<th class="col-md-2">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
</tr>
      <tr>
<td>Some Data</td>
<td>Some Data</td>
...
</tbody>
</table>
</div>

Answer №2

You have the ability to achieve this with CSS.

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead,
table tbody tr {
    display: table;
    table-layout: fixed;
}
/* decorations */
.table-container {
    border: 1px solid black;
    padding: 0.3em;
}
table {
    border: 1px solid lightgrey;
}
table td, table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
table th {
    border: 1px solid grey;
}
<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
            <tr>
                <td>content1</td>
                <td>content2</td>
                <td>content3</td>
                <td>content4</td>
            </tr>
        </tbody>
    </table>
</div>

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

Retrieve JSON data within a service and provide it to a component

I am currently facing an issue with loading data from a JSON file into my component using a service. The data is successfully loaded in the service, as confirmed by the console log; however, when trying to access the data in the component, it does not disp ...

javascripthtmlangulartypescripthttp-get

Encountering blank space in the first table row after a page break when creating a PDF using dompdf

Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...

phphtmlcsspdfdompdf

Saving the order of elements dropped in jQuery UI Droppable into an input field

Link to setup: https://jsfiddle.net/7b8bqzsh/1/ You can view a full working example using the link provided above. The objective is to store the order of the links in an input field so that it can be saved to a database. Currently, only the latest ID is ...

jqueryhtmljquery-uiinputdroppable

When using JavaScript, I have noticed that my incremental pattern is 1, 3, 6, and 10

I am currently using a file upload script known as Simple Photo Manager. Whenever I upload multiple images and wish to delete some of them, I find myself in need of creating a variable called numDeleted (which basically represents the number of images dele ...

javascriptjqueryhtml

The html.dropdown feature is not maintaining the selected value chosen

After successfully filling out my form and submitting data to the database, I encountered a problem with the drop downs on the form not showing the selected value if the model fails validation. Although the HTML clearly shows that the value of the dropdow ...

htmlasp.net-mvcasp.net-mvc-4razor

Pressing the follow button does not save data in the database

Whenever I click on a follow button, it should store followerid and followingid in the follow table and change to an unfollow button. If I then click on the unfollow button, those entries should be deleted from the follow table. I have used JQuery for this ...

phpjqueryhtml

Attempting to insert visuals into a product catalog within a table

As I work on my final school project, a functioning webshop, I've been making good progress. However, I've hit a roadblock when it comes to adding images to a table in PHP. In my setup, I have two PHP files that are interconnected: products.php h ...

phphtml

Use CSS3 and jQuery.validate to highlight mandatory fields in red

I've been attempting to change the color of required fields in a form to red, but so far I haven't had any success. Here is the form code and the CSS that I have experimented with. contact.html <h2>Send us an ...

csshtml

Issues with the alignment of card-footer in Bootstrap 5 card components

Looking to enhance the website for the electronics store I am employed at, I have encountered a challenge while constructing cards using Bootstrap 5. Initially, the cards varied in height until I managed to resolve the issue by setting the card height to 1 ...

htmlcssbootstrap-5

Error: Java Applet cannot be found

As I've come to understand, Java applets are no longer widely used and supported by most browsers. Could it be that my issue is simply due to lack of support? I'm currently testing my HTML file using Internet Explorer on Windows 10 with the follo ...

javahtmlnetbeansapplet

How come my navigation item isn't positioned at the top of the window?

I'm facing an issue while trying to add a navbar with a navbar-brand to my website. It seems like the image I have included is causing the nav-items to not align properly at the top of the window. Here is a snapshot of the problem: https://i.sstatic.n ...

htmlcssbootstrap-4

Toggle the visibility of the data depending on the dropdown option chosen

Currently, I am developing an AngularJS application and facing a requirement to toggle the visibility of data based on the selected value in a dropdown list. Specifically, if the user chooses "Show" from the dropdown, the content within a tab should be dis ...

javascriptjqueryhtmlangularjs

AngularJS: Issue with JQuery Slider not Updating Scope Value

I am currently working on a project using AngularJS and I have integrated a jQuery slider into it. However, I am facing an issue where I need to change the value of a select box which is defined in a $scope array, but the functionality is not working as ex ...

javascriptjqueryhtmlangularjs

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

javascripthtmlcss

Slide the first div upward to display the text in the second div when hovering over the first div

I'm facing an issue where a div needs to move upwards when hovering over it. To see an example, take a look at this JSfiddle. The desired outcome is as follows: As illustrated, the right div is the one being hovered. I have attempted to create this ...

htmlcss

What is the best way to utilize jQuery in order to present additional options within a form?

Let's consider a scenario where you have an HTML form: <form> <select name="vehicles"> <option value="all">All Vehicles</option> <option value="car1">Car 1</option> <option value="car2">Car 2< ...

javascriptjquerycsshtml

Unable to apply margin right to React Material-UI table

I am struggling to add margin to the right of a mui table with no success. Below is the code I have used: <TableContainer> <Table sx={{ mr: 100 }} aria-label="customized table"> <TableHead> <Tabl ...

htmlcssreactjsmaterial-uimaterial-table

The carousel's slides don't behave properly when swiping or using the slider controls (next/prev)

I have recently completed the construction of a carousel with swipe/touch functionality and control buttons for previous and next slides. However, I am facing an issue with the behavior of the carousel as it seems to be sliding by 2 or 3 instead of one at ...

javascriptjquerycsshammer.js

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

I am facing an issue with a parent div that changes size based on the content inside it. When the content exceeds the initial size, causing the parent to scroll instead of expanding, I have a child div set to 100% width and height of the parent. However, t ...

javascripthtmlcssreactjs

I crafted this dropdown menu, but for some reason, the selections aren't registering when clicked. Below is the code I used. Any assistance would be greatly appreciated!

Hi there, I need some help with getting my code to run properly. I've created a dropdown box using HTML and CSS, but it seems like there's an issue with the JavaScript portion as the options are not being selected. I've included a code snipp ...

javascripthtmljquerycss