Question 196182 in Html Question posted in
Some basic documentation can be found here.

Html – How to get table with sticky head and scroll body with rounded borders

I want a table where header is sticky and body should be scrollable and the whole table should have rounded corners.
This is my code.

<div class="col-lg-4 table-container">
  <table>
    <thead>
      <tr>
        <th class="table_header">DEPARTMENTS</th>
      </tr>
    </thead>
    <tbody class="scrollable-body">
      <tr *ngFor="let department of departments">
        <td>{{ department }}</td>
      </tr>
    </tbody>
  </table>
</div>

And CSS

.table-container {
  max-height: 200px; /* Set a maximum height for the container */
  overflow-y: auto; /* Enable vertical scrolling */
}

.table_header {
 padding: 5%;
 color: blue;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

thead {
  position: sticky;
  top: 0;
  background-color: white;
  color: #015468;
}

tbody.scrollable-body {
  display: block;
  max-height: inherit;
  overflow-y: auto;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

The corners are not rounded and the rows in tbody are not coming till the scroll bar, there is so much gap between tbody and scroll.

What changes I need to make to my html and css , so that I can get the table I need?
Please help! Thanks in advance!!!

Tags:

2

Answers


  1. 0 
    <!DOCTYPE html>
<html>

<head>
  <style>
    .table-container {
      width: 400px;
      height: 300px;
      overflow: auto;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
    }
    
    th,
    td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    
    thead th {
      position: sticky;
      top: 0;
      background-color: #f2f2f2;
    }
  </style>
</head>

<body>

  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Add more table rows as needed -->
      </tbody>
    </table>
  </div>

</body>

</html>

    Try this

    Login or Signup to reply.
  2. 0

    You may also try doing it specifically for tbody, but this way make it a bit more trickier to work with tr and td. In this case you set display: block; to make tbody scrollable, but it breaks the table structure which is not the best thing, but if you have a simple table, it should work.
    jsfiddle sandbox link

    table {
  width: 100%;
  border-collapse: collapse;
  border: solid black 1px;
  border-radius: 6px;
  table-layout: fixed;
}

td,
th {
  padding: 8px;
  border-left: solid #ccc 1px;
  border-top: solid #ccc 1px;
}

th {
  border-top: none;
}

td:first-child,
th:first-child {
  border-left: none;
}

.table_header {
  padding: 5%;
  color: blue;
}

thead {
  position: sticky;
  top: 0;
  background-color: white;
  color: #015468;
}

tbody.scrollable-body {
  display: block;
  overflow-y: scroll;
  height: 100px;
}

table td {
  width: 1%; /*hack for width*/
}

.table-container {
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 10px;
}
    <div class="col-lg-4 table-container">
  <table>
    <thead>
      <tr>
        <th class="table_header">DEPARTMENTS</th>
      </tr>
    </thead>
    <tbody class="scrollable-body">
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
      <tr>
        <td>{{ department }}</td>
      </tr>
    </tbody>
  </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search