Header rows in the table remain in place, however, the borders shift when viewed on Chrome and do not display at all on Firefox

I'm having trouble with the borders on my header table. In Chrome, the top border disappears when I scroll down, and in Firefox, it simply doesn't appear.

You can see the issue here https://codepen.io/anon/pen/zyEwZq#anon-login

Check it out on both browsers.

I've attempted to use different positioning techniques like "fixed", but they didn't work.

<div id="dados-ordem-tabela" class="alphaBorda1 settingsConf shadow-box ativa-display-dialog">
<div class="titulo alphaBackground3">
    <a>Dados de Ordem</a>
</div>
<div class="menuSt">
    <ul class="settingsConf-ul">
        <li id="aba-dados-ordem" tab=".dados-ordem" class="mouseoverAlpha5 settingsConf-li tippy-cursor-point pri aq">Ordens</li>
        <li id="aba-dados-ordem-oms" tab=".dados-ordem-oms" class="mouseoverAlpha5 settingsConf-li tippy-cursor-point pri">Stop</li>
    </ul>
</div>
<div class="dados-ordem style-tabela style-tabela-ordens menuBck" style="">
    <table>
       // Table content goes here...
    </table>
</div>

<div class="footer">
    <button class="alphaBackground3 alphaBorda1 button bt-atualizar" type="button">Atualizar</button>
    <button class="alphaBackground3 alphaBorda1 button bt-cancelar" type="button">Fechar</button>
</div>

CSS Styles:

// CSS styles go here...
htmlcss

Answer №1

The issue arises from the following CSS property: position: sticky;

A potential solution is to include an outline for your table header:

.style-table > table > thead th {
    top: 0px;
    position: sticky;
    outline: 1px solid;                         
    border:none; 
    outline-offset: -1px;
}

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

Developing a customizable datepicker with the ability to select specific months or date ranges

I am currently developing a WebApp using flask and constructing templates in HTML/JS for the front end. I am in need of a datepicker that will provide the user with the option to choose a specific date range or select a range of months. Take a look at the ...

javascripthtmldatepicker

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Here is the code for my profile page. I am considering using a callback along with another useEffect function, but I'm unsure. Please help me in finding a solution. For now, let's ignore all the code related to deleting, saving, and handling ingr ...

javascripthtmlreactjsnpmreact-hooks

Ways to customize label appearance within a TextField using the createTheme function

I attempted to modify the margin of a label using em/rem units instead of px (refer to the image attached to this question), but I am unsure where to apply the styles for proper structuring. I have checked the MUI documentation but couldn't find infor ...

cssreactjsmaterial-ui

Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component. Below are my build scripts: "package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts & ...

cssvue.jsnpmwebpackvue-cli

Updating the background of a specific div element by retrieving data from an SQL database

I have a unique situation where I have a div element with the property set to runat="server" and an ID assigned to it. I am attempting to dynamically set the background image for this specific div from a MySQL database where the path URL is stored in a r ...

mysqlcssasp.netvb.netdynamic-css

How can I modify the font style in Bootstrap?

How can I integrate a custom open font into Bootstrap without using a CDN? Should I create a CSS rule to override Bootstrap's default font or locate the font files in Bootstrap and replace them with my desired font? ...

css

Utilizing HTML5 for page-relative translation

Is there a way to apply a translate to an element so it moves to a specific point on the page instead of relative to its starting position? For instance, in the code snippet below, the "card" elements will move 50, 100 relative to their initial position. ...

javascriptcsshtmlwebkithtml5-animation

I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

Hello, I am currently using an accordion with Bootstrap 4 and Vue.js. Here is the code snippet: <div class="faq_accordion" role="tablist"> <b-card no-body class="mb-1"> <b-card-header header-tag=" ...

csstwitter-bootstrapvue.jsbootstrap-4

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Is there a way to apply background color only to the text content within this div, without styling the entire element? ...

javascripthtmlcss

Ways to remove the default classes added by ngbootstrap

My current challenge involves utilizing ngbootstrap for popovers, yet desiring to override its default styling. Specifically, I have a form that should function as a popover triggered by a button click, and it needs to maintain its own distinct styles. Up ...

cssangularng-bootstrap

Unable to reveal hidden text with invisible formatting (font-size: 0)

I have a Joomla 3 website where I created a blog using a design-controll template. I made a "new-article" page but realized that some buttons were missing text. Upon inspecting with Firebug, I found that there was a font-size:0 property causing this issue. ...

htmlcssfontsfont-size

Utilize Custom Field to incorporate background videos from websites like Youtube or Vimeo into your content

I've been working on implementing a video background for my website. I came up with a custom code to embed URL links from Youtube and Vimeo using "oEmbed". The process is functioning well, but I'm facing some challenges in setting the background ...

phpcsswordpressadvanced-custom-fields

How can a JQuery function be used with SVG to trigger a second animation immediately after the first animation is finished?

For the handwriting effect animation, I utilized the animation-delay technique by dividing the object wherever it intersected, drawing paths, and converting them into clipping masks. This involved breaking the letter "W" into four parts, creating different ...

htmljquerycsssvgsvg-animate

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

Implementing the IF statement in jQuery

I've been trying to implement an overflow check when hovering over a div. The issue arises because I'm using jQuery for the hover function and then simple JavaScript for the overflow check in the next step. It seems that directly using an if-then ...

javascriptjqueryhtmlcss

Ways to boost an array index in JavaScript

I recently developed a JavaScript function that involves defining an array and then appending the values of that array to an HTML table. However, I am facing an issue with increasing the array index dynamically. <script src="https://cdnjs.cloudflare. ...

javascripthtmlcssarrayshtml-table

Utilize Ajax datatable to showcase information with the help of CodeIgniter

I am trying to fetch data from a database in my view using ajax, but I am getting the following error message: DataTables warning: table id=users - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please ...

phphtmlajax

showing text from chosen selection with an additional element included in the output

I could use some assistance with this code snippet. My goal is to showcase the options in the format: "Fried Rice = 10.000" as the outcome. However, the issue I am facing is that the select option box also contains the price. What I actually need is for th ...

javascripthtmljquery

Creating a mandatory 'Select' dropdown field in Vue.js

Hello, I am a beginner in VueJS and I am trying to make a select element from a drop-down list required. I attempted to add the required attribute as shown in the code below. Any suggestions on how to achieve this? Thanks. <v-select ...

javascripthtmlvue.js

What is the best way to dynamically set minDate for a datetime-local input field?

I need assistance with setting up two input fields: one for the start date and one for the end date. I want the end date to automatically populate with the same value as the start date when the start date is filled, and have the minimum value set to be the ...

htmlangularjs