Table head sticky and scroll contents-CodePudding

I need to show a table list in such a way that the content should be scrollable keeping the position of table header fixed.IT is working perfectly but the header content is not properly displaying (need to avoid work wrap)

The main problem is while the content is scrolling we could see the scrolling content through a 1px gap somehow created above sticky header.

my code:-

div.list_wrapper {
  height: 250px;
  overflow: auto;
}

thead tr th {
  position: sticky;
  top: 0;
}

<div >
  <div >
    <table >
      <thead>
        <tr>
          <td colspan="3"></td>
          <td>A text to be always displayed here</td>
        </tr>
        <tr>
          <th>Date</th>
          <th>Name</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let list of OfficersList">
          <td>{{ list.updated_at | date:'d-MM-yyyy' }}</td>
          <td>{{ list.name }}</td>
          <td>{{ list.status }}</td>
          <tr>
      </tbody>
    </table>
  </div>
</div>

CodePudding user response：

Your code snippet is not behaving as you described. Which is the row you want to be sticky?

As for the problem you have, maybe try with

table {
  border-collapse: collapse;
  border-spacing: 0;
}

CodePudding user response：

Try to remove space between borders

table {
  border-spacing: 0;
 }
thead tr th {
    background: #ddd;
}