CODEWITHSUNDEEP
htmlcss
3gwebtrain
3gwebtrain

Reputation: 15293

Position Sticky doesn't work with table th border property

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

Upvotes: -1

Views: 5126

Answers (3)

Anurag Shukla
Anurag Shukla

Reputation: 9

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

Upvotes: 0

TechySharnav
TechySharnav

Reputation: 5084

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>

Upvotes: 2

Raeesh Alam
Raeesh Alam

Reputation: 3480

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>

Upvotes: 0

Related Questions