HTML table with scroll feature displays gaps between consecutive rows

I've created a scrolling table with some header line spacing showing up when scrolled. Do you know how to hide it?

Check out this Codepen example

Here's the HTML structure:

<div class="table-container">
   <table class="table">
      <thead class="table-head text-center text-white">
         <tr>
            <th colspan="1" style="width: 30%;">Text 6</th>
            <th colspan="1" style="width: 30%;">Text 7</th>
            <th colspan="1" style="width: 40%;">Text 6</th>
         </tr>
         <tr>
            <th colspan="1" style="width: 30%;">Text</th>
            <th colspan="1" style="width: 30%;">Text</th>
            <th colspan="1" style="width: 40%;">Text</th>
         </tr>
      </thead>
      <tbody class="body-half-screen">
         /.../
      </tbody>
   </table>
</div>

And here is the CSS for styling the table:

.table-container {
    width: 100%;
    overflow: auto;
    height: 50vh;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table-head {
    vertical-align: middle;
    position: -webkit-sticky;
    position: sticky;
    will-change: transform;
    top: 0;
    z-index: 2;
    background-color: gray;
}

.table th, .table td {
  border: 1px solid gray;
}

https://i.sstatic.net/CATNO.png

Answer №1

It's important to note that when you apply border: 1px, it adds a 1px border around each element's box model. For more information, check out this resource:

https://example.com/css-box-model-guide

An alternative approach is to utilize the :not selector, which allows you to add borders to all elements except those in the table header.

If you prefer to keep a border, consider using outline: 1px; instead.

I had to trim some of the excess HTML content for brevity in my code snippet below:

.element-container {
  width: 100%;
  overflow: auto;
  height: 50vh;
}

.element {
  width: 100%;
  border-collapse: collapse;
}

.element-header {
  vertical-align: middle;
  position: -webkit-sticky;
  position: sticky;
  will-change: transform;
  top: 0;
  z-index: 2;
  background-color: gray;
}

.element th:not(.element thead tr th),
.element td {
  border: 1px solid gray;
}
<div class="element-container">
  <table class="element">
    <thead class="element-header text-center text-white">
      <tr>
        <th colspan="1" style="width: 3.45%;">Header 1</th>
        <th colspan="1" style="width: 3.45%;">Header 2</th>
        <th colspan="1" style="width: 3.45%;">Header 3</th>
        <th colspan="1" style="width: 3.45%;">Header 4</th>
        <th colspan="1" style="width: 3.45%;">Header 5</th>
      </tr>
    </thead>
    <tbody class="body-half-screen">
      <tr>
        <td>Data1</td>
        <td>Data</td>
        <td>Data</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

How can I locate and modify particular element attributes within PHP files in a WordPress template?

Hello everyone, I am relatively new to the world of Wordpress and have recently taken over a project from another developer. The previous developer left behind default placeholders and texts that need to be updated. One specific change I need to make is to ...

Fade out the div element when clicked

For my game project, I needed a way to make a div fade out after an onclick event. However, the issue I encountered was that after fading out, the div would reappear. Ideally, I wanted it to simply disappear without any sort of fade effect. Below is the co ...

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

My website has tooltips enabled, but I am looking to hide the tooltip pop-ups that appear specifically over youtube video embeds. Upon inspecting the webpage, I found the code snippet below that is associated with youtube videos: <div data-tippy-root id ...

What is preventing me from using CSS to customize elements within InfoWindows?

I've been attempting to adjust the font-size of elements within my InfoWindows, but I'm facing some challenges. Here's a snippet of the code for my InfoWindow: <InfoWindow marker={this.state.activeMarker} visible={thi ...

"Is it possible to include a button for horizontal scrolling in the table

I have a bootstrap table with overflowing set to auto within its container, along with a locked first column. While a horizontal scroll bar allows for viewing additional data, I am looking to incorporate buttons for navigation as well. Users should have th ...

Eliminate the header top margin in Bootstrap

HTML <div class="container-fluid"> <div class="row"> <div class="page-header header_site"> <h1><font>ABC Company</font></h1> </div> </div> </div> CSS Code: .header_site { b ...

Organize table information using rowspan functionality

View of Current Table I am looking to implement a side column in my table using rowspan to group dates within each pay period. The goal is for a supervisor to be able to create a new pay period, which will assign a unique integer in the database and then ...

Automatically close an element when you click on a different element

Hello everyone! I need some help again. I'm working on a script that displays an overlay when a menu item is clicked. Within this menu, there is a modal contact form with a close icon or anchor that should appear when clicked. My goal is to have the o ...

JavaScript and CSS content, when compared, showcase varying characteristics and functionality

I'm attempting to create a conditional statement based on comparing strings from a CSS content attribute. Here is my current code, but despite the strings being identical, the comparison returns false. CSS .right-section::before { content:" ...

Guide to developing a manual tally counter with recorded logs using HTML and JavaScript

I am currently in need of assistance with creating a manual input counter using the App Script Editor. My website design already includes a single input textbox, a reset button, and a disabled box. What I would like to achieve is that when I enter a numb ...

Issue with showing an input field following the button click

I'm having a bit of trouble with this function that should add an input element to a div. I've tried using appendChild and also concatenating the object to innerHTML, but no luck so far. Could it be something my beginner's mind is missing? f ...

a div sandwiched between two others

I am trying to nest a <div> within another <div> and center it within the parent. Here is my current approach: <div id="redthing"> <div id="whitebox" > </div> </div> The CSS code I am using is as follows: #red ...

Incorporate a curved progress line into the progress bar

Currently, I am working on creating a customized progress bar: .create-progress-bar { padding: 0 !important; margin: 25px 0; display: flex; } .create-progress-bar li { display: flex; flex-direction: column; list-style-type: none ...

Is there a way to modify my code to eliminate the need for a script for each individual record?

Whenever I need to create a code with the ID by browsing through my records, is there a way to make just one function for all the records? $tbody .= '<script> $(document).ready(function(){ $("#img'.$idImage .'").click(functi ...

What are the various ways to apply unique padding styles to ng-repeat items?

Take a look at this image. I need to position my 6 boxes on the 6 vertical lines above the image. I am struggling with applying different padding styles to my ng-repeat directive. Although I tried using [ng-class], it doesn't seem to work as expected. ...

Firefox's keyup event

Is it possible to detect a keypress using the jQuery keyup function, as I am facing an issue where it works in Chrome, Edge, IE, and Opera but not in Firefox. $(".textfield").contents().keyup(function(evnt) { document.getElementById("btn_save").style. ...

Display or conceal various objects using a single button in HTML

I've been working on creating a chatbot widget for my website, but I've run into an issue. The "Chat with us" button only shows the bot and not the close button as well. Here's what I've attempted: <input id="chat" type="button" on ...

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

Tips for maintaining the default page size on your website when adjusting the browser window size

I've been struggling with a problem for quite some time now. How can I maintain the default page size of my website while resizing the browser? Let's assume the page size is 1280x720, how do I ensure that size remains intact when I adjust t ...

Issue with CKEditor within a ColorBox dialog box

Could someone please assist me? I am facing an issue with my HTML page where I have incorporated a ColorBox modal popup. Inside the ColorBox popup, there is a CKEditor. The problem is as described below: In Internet Explorer, the CKEditor functions proper ...