I'm working with a table that has sticky <td>'s as headers. Unfortunately, the table's <tr> and <thead> elements cannot be made sticky.
The problem I'm facing is that when the header becomes sticky, the borders disappear and it looks like there is extra padding.
After conducting some research, I stumbled upon the solution:
border-spacing: 0; *border-collapse: collapse;table{
border-spacing: 0; *border-collapse: collapse;
}
td{
border:3px solid gray;
padding:3px;
}
tbody td{
background:lightgreen;
}
.sticky{
background:maroon;
color:white;
position:sticky;
top:0;
}<table>
<thead>
<tr>
<td class="sticky">This is sticky header</td>
<td class="sticky">This is sticky header</td>
<td class="sticky">This is sticky header</td>
<td class="sticky">This is sticky header</td>
</tr>
<tbody>
<tr><td>Some random text</td></tr>
[additional rows of random text]
<tr><td>Some random text</td></tr>
</table>To resolve the issue, include border-collapse: separate; in the table. This will style your borders to align with the <td> elements and ensure that they are truly connected to the <td>, resulting in a collapsed appearance.
Additionally: don't forget to add border-spacing: 0; to the table to eliminate any padding for the table cells.
table{
border-collapse: separate;
border-spacing: 0;
}
td{
border:3px solid gray;
padding:3px;
}
tbody td{
background:lightgreen;
}
.sticky{
background:maroon;
color:white;
position:sticky;
top:0;
}<table>
<thead>
<tr>
<td class="sticky">This is sticky header
<td class="sticky">This is sticky header
<td class="sticky">This is sticky header
<td class="sticky">This is sticky header
<tbody>
<tr><td>Some random text
<tr><td>Some random text
... <!-- additional rows of random text -->
</table>I'm currently working on an app that requires attendance to be reported for specific events. I retrieve a list of JSON objects using AJAX. My goal is to create a table within a bootbox dialog that generates new rows for each item in the result from m ...
Is there a way to create a fixed div that is compatible with IE10 Mobile on Windows Phone 8? Currently, I have been using the following code: <div style="position:fixed;width:100%;background-color:blue;"> test </div> This solution is only ...
I am looking to create a form that can duplicate or clone itself when the CPF/CNPJ (Brazilian personal identification) onchange. Below is the current code I have: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" r ...
Essentially, if a background image is placed within a scrolling div, it will no longer remain fixed and will revert back to scrolling: CSS: <div class="wrapper"> <span></span> </div> HTML: html, body{ width: 100%; height: ...
I am facing an issue with my ajax code. It doesn't print any output, but when I use alert() to print the output, it shows up fine. $(".grp-ans").each(function(e){ $.ajax({ type: 'POST', url: 'show-answ ...
Check out my jsFiddle example here: http://jsfiddle.net/pqCGd/. Within the jsFiddle, you will find a large messages div that contains multiple message divs. In this example, I have manually provided an example of a message div instead of using auto-genera ...
Here is the mockup I am working with: https://i.sstatic.net/bIepQ.png So far, I have made good progress with this code: https://codesandbox.io/s/codepen-with-react-forked-16t6rv?file=/src/components/TrendingNFTs.js However, I am facing a couple of challe ...
When hovering, I want the opacity to be set at "0.3"; when not hovering, it should be set at "1". Additionally, the color of h2 and h3 in each div should transition from white to red. I have searched extensively online and tried to sol ...
Help Needed: Overlapping Boxes in Responsive Design I am facing a problem with my CSS where the boxes on my website are overlapping when I shrink the browser window. The issue occurs as I resize the window, causing the boxes to overlap more and more. I ...
Struggling with a task at hand: My goal is to enhance a string that contains HTML by linking certain words to corresponding "read more" pages. The challenge arises when these search terms overlap, resulting in nested links or terms not being replaced prop ...
Is there a way to darken the rest of the page when a user hovers over the menu bar on my website? I've been playing around with jQuery but can't seem to get it right. Any suggestions? I'm looking to add a class '.darken' to #conte ...
I have designed a dropdown menu, but I am facing an issue with the portfolio section. When I hover over the portfolio, the dropdown menu appears correctly. However, when I hover over the text of the first dropdown menu, all sub-dropdown menus from other dr ...
I can't seem to figure out why I'm struggling with this. Check out the screenshot below: Here is my current CSS: #tabbase { display : inline-block; width : 230px; height : 173px; border : 1px solid #3e3e3e; background-color : #1b ...
While my website functions perfectly on desktop, I am facing an issue where the buttons are not working when accessed through mobile devices. Interestingly, these buttons were operating fine in a previous version of the site. Although I have made minimal ...
Is there a way to format text so that some aligns left and some aligns right on the same line? <p>This text should be aligned left. This text should be aligned right.</p> I can align all text to the left or right, either inline or through a s ...
// JavaScript Document "use strict"; $(window).scroll(function(){ if($(window).scroll() > 100){ $("#scrollTop").fadeIn(); } }); $(window).scroll(function(){ if($(window).scroll() < 100){ $("#scrollTop").fadeOut(); } }); $(document).ready(function() ...
I am currently using the Bootstrap framework and I am trying to create a popup image with a title, but it only shows the image. I am not sure how to add code in JavaScript to display the title as well. Can someone please assist me? Here is my code: Javas ...
As a newcomer to the world of canvas, I have been learning from various sources about how it works. However, my goal is more dynamic and unique than what I've seen so far. I am looking to create a body background for my webpage that is responsive, cen ...
Positioning an ajax loading image in the center of a mobile page. The code snippet above is used to load database records via ajax by displaying a loading image in a Div element. My inquiry is regarding how to ensure that this loading image appears at th ...
Currently, I am working on a project where I am creating a drop-down list to assist users in selecting media and ink for their printers. The goal is to then generate a table displaying the selected results. While I have managed to successfully generate the ...