thead{
width: calc(100% - 17px);
display:block;
}
tbody{
display:block;
overflow-y: auto;
height:100px;
}
Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently, when the scrollbar is not displayed, the tbody stretches further to the right than intended. How can this be fixed?
Is it possible to adjust the markup structure instead of trying to set the tbodys width to ignore the scrollbar?
CSS
table{
font: 11px arial;
width: 245px;
}
th, td{
border:1px solid #000;
}
div {
height:90px;
width: 262px; /*table width + 17px */
overflow-y: auto;
}
HTML
<table>
<thead>
<tr>
<th style="width:165px">Name</th>
<th>Country</th>
</tr>
</thead>
</table>
<div>
<table>
<tbody>
<tr>
<td style="width:165px">Mart Poom</td>
<td>Estonia</td>
</tr>
<tr>
<td>David Loria</td>
<td>Kazakhstan</td>
</tr>
<tr>
<td>Wojciech Szczęsny</td>
<td>Poland</td>
</tr>
<tr>
<td>Gianluigi Buffon</td>
<td>Italy</td>
</tr>
<tr>
<td>Igor Akinfeev</td>
<td>Russia</td>
</tr>
</tbody>
</table>
</div>
This method allows the div to handle scrolling while maintaining a fixed width for the table.
To address this issue, JavaScript must be utilized. Verify if the scrollbar is visible and adjust the width of the tbody accordingly.
Below is the pertinent JS code for reference, with t representing the tbody element:
if (t.clientHeight == t.scrollHeight)
{
t.style.width = "224px";
}
I have made changes to your JSFiddle to demonstrate how it can be implemented in your scenario.
It is not necessary to specifically declare the use of <tbody> and <thead> tags in your table. One potential solution for your issue could involve setting the row (<tr>) containing the <th> elements to have a position: fixed. A user faced a similar challenge before, which was discussed on this thread: How to make a tables header static when scrolling
When set at 100% width, it seamlessly adjusts to the table's width, regardless of whether or not a scroll is present.
thead{
width: 100%;
display:block;
}
I am currently experiencing a problem with the code found on http://jsfiddle.net/eSbps/. This specific code pertains to a menu system that reveals second levels when hovering over the top levels, using slideDown('slow'). To prevent queuing effe ...
Check out this code snippet I have here: https://jsfiddle.net/kimwild/mtxgtwr5/2/ main#wrapper { z-index: 1; width: 100%; position: relative; overflow: hidden; background-color: red !important; border: 10px dotted #4D37DB; } figure#about-im ...
Recently, I came across an interesting CSS minifier tool at . On that webpage, there is a section titled "What does the CSS Compressor purposely NOT do?" which highlights four specific things, two of which caught my attention due to their potential impact: ...
My goal is to create an animation effect for two overlapping divs that will reveal or hide the text inside them. I want one div to animate from left to right while the other animates from right to left, creating a wiping effect where as one piece of text d ...
I am facing a challenge in injecting Javascript variable values into HTML forms on an Expression JS server. I am unsure about how to solve this issue. All I want to do is insert the values of x, y, and res into the forms with the IDs 'firstvalue&apos ...
My challenge involves a simple modal that includes a text area. The issue I am facing is resetting the data of the textarea. Below is the modal code: <div class="modal fade" ng-controller="MyCtrl"> <div class="modal-dialog"> <d ...
I had some queries in mind: 1) How can I ensure that the circular profile image on the rightmost side fits within the header without overflowing? 2) How do I properly align the last three images at the bottom (in the "R" class), with adequate spacing bet ...
I've recently implemented a search bar utilizing Bootstrap. This is the code for the search bar: <div class="md-form mt-0"> <input class="form-control" id="myInput" type="text" placeholder="Sear ...
Experimenting with servlet calls through Ajax functionality using a simple program. A form consisting of a text box and a div with some text. The program takes input from the user, replaces the text inside the div tag. The form looks like this: <form& ...
I'm facing an issue where my mega menu is hidden behind the carousel, and I need it to show on top. You can see how it looks before adding the carousel and after adding the carousel from Bootstrap. Here are the links to the Mega Menu CSS and Mega menu ...
I'm attempting to create a gradual fading gray line by using a div that is sized at 1x100px with a CSS gradient applied for the fade effect. The only issue I am encountering is in Internet Explorer where the div is displaying a blue border which I am ...
Can someone assist me with validating email addresses correctly? I am able to handle empty fields, but now I need a way to identify and display an error message for invalid email addresses. How can I modify my validation process to check for improper email ...
Is there a way to optimize the use of base64 data in CSS by defining it once and referencing it in multiple content properties? div#my_id1 { content: url(data:image/png;base64,...); } div#my_id2 { content: url(data:image/png;base64,...); } Using ...
Currently, I am in the process of learning AngularJS and attempting to upgrade my current method of fetching data from a web service and dynamically assigning it to a variable that is binded using ng-repeat. My main objective is to implement an asynchronou ...
https://i.stack.imgur.com/2ZqPa.png In my components folder, specifically in navbar.js, I have a path to the image folder <img className="block lg:hidden h-8 w-auto" src='../images/logo_injoy.png' alt="Logo" /> U ...
I am facing a minor issue with the bottom margin of an image. I can't figure out why there is a small gap between the image and the menu below. Can someone provide an explanation? My goal is to have the menu align perfectly with the image, but for so ...
Currently, I am using kojs within my Magento 2 project. I have implemented a method that successfully shows and hides an input box based on user interaction. However, despite the function working as expected, the checkbox does not display its checkmark. D ...
Is there a way to assert the CSS width of an element in NightwatchJS to be 100% without hard-coding the value? Currently, when I attempt to do so, it fails and reports that the width is 196px. The specific error message is as follows: Testing if element ...
I am having an issue with the vertical centering of the logo element within the <header> container on this page. It seems to be more pronounced on mobile devices compared to desktop. However, the second element (#forum-link) is aligning correctly. W ...
Creating a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) has been easy for browsers like Chrome. However, I've been encountering significant difficulties in getting the mask to display properl ...