0

I have applied following CSS to my table.

thead, tbody 
{ 
   display: block; 
}

tbody 
{
    height: 200px;        
    overflow-y: auto;  
    overflow-x: auto;
}

The objective is to make the thead fixed, and keep tbody scrolling. Before applying the above CSS, thead and tbody content was alligned properly. But after putting the CSS, the content is mis-aligned. Even tr elements doesn't fill the entire space of their container. Can someone help me with this? Any help will be appreciated.

Aditi
  • 21
  • 8

1 Answers1

0

try this code for sticky header and scrollable body for table. hope will work for you.

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}
th{
  position: sticky;
      position: -webkit-sticky;
      top: -1px;
      z-index: 999;
      background-color: #000;
      color:white;
  
}
.sticky-table {
    height: 200px;
    overflow: auto;
}
<div class="sticky-table">
      <table>
      <tr>
        <th>First Name</th>
          <th>m-1</th>
        <th>m-2</th>

      </tr>
      <tr>
        <td>user 1</td>
              <td>50</td>
        <td>50</td>     
      </tr>
      <tr>
        <td>user 2</td>
               <td>94</td>
        <td>94</td>     
      </tr>
      <tr>
        <td>user 3</td>
              <td>67</td>
        <td>67</td>
      </tr>
      <tr>
        <td>user 4</td>
          <td>67</td>
        <td>67</td>
      </tr>
      <tr>
        <td>user 5</td>
        <td>Johnson</td>
               <td>67</td>
      </tr>
    </table>
    </div>
Pushprajsinh Chudasama
  • 7,772
  • 4
  • 20
  • 43
  • It helped. But in my table, in every row, there is one checkbox also in the starting column, so when i am scrolling, the checkbox is showing in header also, with white color..It's not looking good. Is there any way to make the checkbox black as soon as it goes to thead. – Aditi Dec 10 '19 at 14:01