Position Sticky doesn't work with table th border property

Question

I am trying to keep the thead in a sticky position. It works, but the border is still on scroll not being in a sticky state. How to solve the problem?

Here's my code:

table{
  border-collapse: collapse;
  border:1px solid gray;
  width: 100%;
}

th{
  text-align: left;
   border-bottom: 1px solid black;
}

.container{
  overflow-y: auto;
  height: 200px;;
  background-color: yellow;
}

thead {
  position: sticky;
  top: 0;
  background-color: yellow;
 
}

<!doctype html>

<html>

<head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
</head>

<body>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th>Column 1 </th>
                    <th>Column 2 </th>
                    <th>Column 3 </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
                <tr>
                    <td>Content 1</td>
                    <td>Content 2</td>
                    <td>Content 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Live Demo

It's because of your `border-collapse: collapse`. Remove that line and the borders will stick. — Liftoff, Aug 12 '21 at 06:47
Does this answer your question? [Border style do not work with sticky position element](https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element) — Jongwoo Lee, Aug 12 '21 at 06:48

TechySharnav · Answer 1 · 2021-08-12T07:13:04.983

You can use ::before and ::after selectors to add the border.

table {
  border-collapse: collapse;
  border: 1px solid gray;
  border-top: none;
  width: 100%;
}

th {
  text-align: left;
  border-bottom: 1px solid black;
}

.container {
  overflow-y: auto;
  height: 200px;
  background-color: yellow;
}

thead {
  position: sticky;
  top: 0;
  background-color: yellow;
}

thead::after,
thead::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

thead::before {
  top: 0;
  border-top: 1px solid gray;
  margin-top: -0.5px;
}

thead::after {
  bottom: 0;
  border-bottom: 1px solid gray;
}

<!doctype html>

<html>

<head>
  <link rel="stylesheet" href="lib/style.css">
  <script src="lib/script.js"></script>
</head>

<body>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>Column 1 </th>
          <th>Column 2 </th>
          <th>Column 3 </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
        <tr>
          <td>Content 1</td>
          <td>Content 2</td>
          <td>Content 3</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

score 0 · Answer 2 · edited Aug 12 '21 at 16:56

0

Use border-collapse: separate; instead of border-collapse: collapse; in your table CSS

edited Aug 12 '21 at 16:56

Roohullah Kazmi

337
3
14

answered Aug 12 '21 at 06:47

Anurag Shukla

9
2

score 0 · Answer 3 · answered Aug 12 '21 at 06:56

In thead element you can use box-shadow property and border-bottom as transparent property.
Check below snippet hope will help you a lot.

table{
  border-collapse: collapse;
  border:1px solid gray;
  width: 100%;
}
th{
  text-align: left;
}
.container{
  overflow-y: auto;
  height: 200px;;
  background-color: yellow;
}
thead {
  position: sticky;
  top: 0;
  background-color: yellow;
  border-bottom: transparent;
  box-shadow: 0 0px 0.5px 1px gray;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Column 1 </th>
        <th>Column 2 </th>
        <th>Column 3 </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
      </tr>
    </tbody>
  </table>
</div>

Position Sticky doesn't work with table th border property

3 Answers3