How can I keep the table header fixed while allowing the body to scroll without breaking the table layout? I've tried using the CSS below, but it results in the width of the header columns being different from the width of the body columns. Any suggestions on how to avoid this problem?
#tblLocations thead, tbody {
display: block;
}
#tblLocations tbody{
max-height: 290px;
overflow-y:scroll;
}
Take a look at this example: Creating a table with fixed header and scrollable body
.tableFixHead {
overflow-y: auto;
height: 200px;
}
.tableFixHead table {
border-collapse: collapse;
width: 100%;
}
.tableFixHead th,
.tableFixHead td {
padding: 8px 16px;
}
.tableFixHead th {
position: sticky;
top: 0;
background: #eee;
} <div class="tableFixHead">
<table>
<thead>
<tr>
<th>Last name</th>
<th>Points</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>50</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>Jackson</td>
<td>94</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
</tr>
<tr>
<td>Smith</td>
<td>50</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>Jackson</td>
<td>94</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
</tr>
<tr>
<td>Smith</td>
<td>50</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<tr>
<td>Jackson</td>
<td>94</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
</tr>
<tr>
</tbody>
</table>
</div>Expanding on @Nisarg's response, I made a small adjustment to prevent the body from scrolling over the header. When I encountered the issue of the body overlapping with the header, applying the final CSS code resolved the issue.
.tableFixHead {
overflow-y: auto;
height: 200px;
}
.tableFixHead table {
border-collapse: collapse;
width: 100%;
}
.tableFixHead th,
.tableFixHead td {
padding: 8px 16px;
}
.tableFixHead th {
position: sticky;
top: 0;
background: #eee;
}
.tableFixHead tbody tr{
position: inherit;
} <div class="tableFixHead">
<table>
<thead>
<tr>
<th>Last name</th>
<th>Points</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>50</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<td>Jackson</td>
<td>94</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
</tr>
<tr>
<td>Smith</td>
<td>50</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<td>Jackson</td>
<td>94</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
</tr>
<td>Smith</td>
<td>50</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
</tr>
<td>Jackson</td>
<td>94</td>
<td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
</tr>
<tr>
</tbody>
</table>
</div>I am seeking help with datatable.js. I would like to insert a button inside the cells of the datatable columns to expand and display the detailed content of each cell. When I click on the red button, a popup modal should appear showing the full list of con ...
Although not as abundant as depicted in the image below, it is more evident that I am seeking a couple of font awesome icons overlaid with a bootstrap badge to display notifications. The two issues that I am encountering are: There is excessive spacing ...
I'm looking to create a text animation similar to the one on this website: They have 3 keyframes for two types of animations: Left to Right and Right to Left. The RTL animation starts at 164vh, while LTR starts at -200vh. These text animations only ...
Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle. The issue I am facing is that every time I click on the left or right butto ...
Having some trouble saving form data to the database using angularjs. Not sure what I'm doing wrong. Here's my HTML form: <form id="challenge_form" class="row" > <input type="text" placeholder="Challenge Name" ng-model="ch ...
I am currently designing a website and I want to feature a video on the homepage. The video is hosted on YouTube and I need to embed it into my website. <html> <iframe width="560" height="315" src="https://www.youtube.com/embed/spPdelVEs_k?rel= ...
My div elements are not displaying inline, I'm thinking maybe I shouldn't use the nav and div structure like this. But starting over again seems like a lot of work. How can I fix this issue? Just so you know, I'm only on my 4th day of learn ...
My setup includes two tabs: <div class="modal-body"> <form name="myForm" novalidate="novalidate"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#basicInfo">Info</a></li> ...
I have a website and I've successfully integrated Google Custom Search following all the provided instructions. Although I indexed my site three months ago, the custom search still shows no results. Even after adding sitemap.xml, there has been no i ...
Looking to update a boolean attribute for an object in JavaScript (in this case, the object is part of fullPage.js library). I am interested in turning off the navigation attribute by setting it to false, and ideally would like to do this from a separate f ...
I recently created a slideshow using jQuery that features fading images with corresponding captions in individual divs. While the captions are meant to have a transparent appearance, I have encountered an issue specifically in Internet Explorer where this ...
Is there a way to create a single scrolling page with a fixed element that remains visible as the user scrolls down? Imagine an image of a car on a road, where the car appears to be moving down the road as the user scrolls. The car should go under certain ...
I recently encountered an issue with my HTML file where the text "Indian" became underlined after saving the file. Here is the code snippet: <a href="file:///G:\work files\project\indian.html" target="_blank"> <div class="button ...
Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...
Hello everyone, I am new to HTML/CSS and I am facing an issue that I believe can be easily resolved. Currently, my code has four sections, with the last three displaying as expected in a consecutive manner. However, the second section is overlapping on t ...
I am facing a challenge with managing two separate <style> tags that each contain a large number of styles and media queries. The issue is that one set of styles is intended for desktop users, while the other is meant for mobile users. When both se ...
I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate h ...
My issue involves printing out HTML code that is not stored as a simple string, requiring me to decode it before echoing. The problem arises when I echo the decoded value and unwanted quotes appear, disrupting the output. Here's an example: <div> ...
Is there a way to pass a comma in an input field to the server using input arrays? The server currently receives comma-separated input values from an array of inputs, which causes it to consider any commas within the input as separators. For example: HTM ...
I'm currently working on adding a flip effect to multiple tiles whenever a user clicks on them as part of building a dashboard-style webpage. I am having trouble making the click event work for all tiles with the same class name. Even though all the ...