Vanishing border around the sticky table header

Question

Vanishing border around the sticky table header

While working on creating a table in an excel style using html and css with a sticky header, I noticed that the borders on the table head appeared strange.

Take a look at the code snippet below:

table {
  border-collapse: collapse;
  position: relative;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;
}

th,
td {
  border: 1px solid black;
  padding: 10px 20px;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Visit the JSFiddle link for a visual representation of this code: https://jsfiddle.net/cpotdevin/5j3ah247/

The following images illustrate how the table appears in different browsers.

Chrome: The upper and lower borders on the sticky row disappear. https://i.sstatic.net/SBxJw.jpg

Firefox: All inner borders disappear. https://i.sstatic.net/S0twe.jpg

Safari: Similar to Chrome's behavior. https://i.sstatic.net/3VaNo.jpg

I also experimented with removing border-collapse: collapse; and using the cellspacing=0 attribute instead, but this resulted in thicker inner borders than desired.

View the example here: https://jsfiddle.net/cpotdevin/wxvn1crL/

Any suggestions on how to address this issue? The goal is to maintain consistent border appearance when the table header is in a sticky state. https://i.sstatic.net/BLoBR.jpg

EDIT

A similar question was previously resolved, as highlighted by @JonMac1374. Visit the answer here.

Check out my implementation of the solution provided: Implementation

html css

Answer 1

Answer №1

Here is a potential solution that involves using a shadow effect:

I have tested this method with the latest versions of Chrome & Firefox.

You can view a demo at the following link: https://jsfiddle.net/4npw6q5j/. Feel free to try it out and let me know if it works as an alternative for you.

table {
  position: relative;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;box-shadow:0 1px
}

th,
td {
  border: 1px solid black;
  padding: 10px 20px;
}

<table cellspacing=0>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
    ... (additional rows omitted for brevity)
  </tbody>
</table>

Answer 2

Here is a potential solution that involves using a shadow effect:

I have tested this method with the latest versions of Chrome & Firefox.

You can view a demo at the following link: https://jsfiddle.net/4npw6q5j/. Feel free to try it out and let me know if it works as an alternative for you.

table {
  position: relative;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;box-shadow:0 1px
}

th,
td {
  border: 1px solid black;
  padding: 10px 20px;
}

<table cellspacing=0>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
    ... (additional rows omitted for brevity)
  </tbody>
</table>

Answer 3

Answer №2

border-collapse: collapse eliminates overlapping borders. To achieve a thinner border effect, you can utilize 2 separate tables; one for <thead>, and another for tbody. Then apply the style td{border-top: 0px !important;}:

tr:nth-child(even) {
  background-color: lightgray;
}
table{
  border-collapse: collapse;
}
.title {
  background-color: lightblue;
  position: sticky;
  top: 0;

}

th,
td {
  border: 1px solid black;
  padding: 10px 20px;
}
td{
  border-top: 0px !important;
}

<table cellspacing="0" width="500" class="title">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
</table>
<table cellspacing="0" width="500">
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Output:

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

Answer 4

border-collapse: collapse eliminates overlapping borders. To achieve a thinner border effect, you can utilize 2 separate tables; one for <thead>, and another for tbody. Then apply the style td{border-top: 0px !important;}:

tr:nth-child(even) {
  background-color: lightgray;
}
table{
  border-collapse: collapse;
}
.title {
  background-color: lightblue;
  position: sticky;
  top: 0;

}

th,
td {
  border: 1px solid black;
  padding: 10px 20px;
}
td{
  border-top: 0px !important;
}

<table cellspacing="0" width="500" class="title">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
</table>
<table cellspacing="0" width="500">
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Output:

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

Answer 5

Answer №3

To achieve a unique table design, one must utilize the border-collapse: separate property and only define the bottom and left borders.

For filling in the missing borders on the edges of the table, the following CSS can be applied:

table {
  position: relative;
  border-collapse: separate;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;
}

th, td{
  border-color:black;
  border-style:solid;
  border-width:0 0 1px 1px;
  padding: 10px 20px;
}

th{
  border-top-width:1px;
}

th:last-child, td:last-child
{
  border-right-width:1px;
}

tr:last-child td{
  border-bottom-width:1px;
}

View the Code on JSFiddle

Answer 6

To achieve a unique table design, one must utilize the border-collapse: separate property and only define the bottom and left borders.

For filling in the missing borders on the edges of the table, the following CSS can be applied:

table {
  position: relative;
  border-collapse: separate;
}

tr:nth-child(even) {
  background-color: lightgray;
}

th {
  background-color: lightblue;
  position: sticky;
  top: 0;
}

th, td{
  border-color:black;
  border-style:solid;
  border-width:0 0 1px 1px;
  padding: 10px 20px;
}

th{
  border-top-width:1px;
}

th:last-child, td:last-child
{
  border-right-width:1px;
}

tr:last-child td{
  border-bottom-width:1px;
}

View the Code on JSFiddle

Vanishing border around the sticky table header

Answer №1

Answer №2

Answer №3

Similar questions

Ways to evenly distribute divs into rows

Concealing overflow for text content through CSS styling

Creating image filters using an object in jQuery

Tips for adjusting row height in a fluid table design using div elements

Ways to reduce the amount of time spent watching anime when it is not in view

Using inline-block can be effective on certain occasions

Creating a responsive Google map within a div element: A step-by-step guide

What is the best way to adjust a fixed-width table to completely fill the width of a smartphone browser?

Using PHP, jQuery, and HTML to submit a form and insert data into MySQL, all while

Submenu Positioning Problem Identified in Firefox Display

What is the reason for the absence of absolutely positioned elements in the render tree?

Checking if the iframe location has been modified using Jquery

Is there a way to stop TinyMCE from adding CDATA to <script> elements and from commenting out <style> elements?

Unable to execute a basic opacity transition on a div element

Creating Sub Menu in Blogger with pageListJSON

Tips on building an immersive interactive panoramic website

What is the best way to activate an event listener only after a button has been clicked?

Steps for positioning the navigation bar beneath header 1

Unable to assign focus to textbox

Click here for a hyperlink with an underline that is the same width