HTML, CSS , Table body scrolling with fix header

Question

I want my table to be scrollable vertically with fix header. I want also to make the table width fit on the browser.

**Please, as much as possible, do not make any changes on the 'html' part, just on the 'css' part,

table{
  border-spacing: 0;
  border: 2px solid black;
}

table tbody tr td, thead th {
    border-right: 1px solid black;
}

<div class="table_container">
  <table>
  <thead>
  <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
      <th>Head 5</th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
  </tr>
  <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
  </tr>
  <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
  </tr>
  </tbody>
  </table>
</div>

Possible duplicate of [HTML table with fixed headers?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — Deepak Yadav, Nov 28 '16 at 11:49

score 1 · Answer 1 · answered Nov 28 '16 at 08:46

1

Try this

.table_container table{
    display: table;
    width: 100%;
}
  .table_container table thead,   .table_container table tbody {
    float: left;
    width: 100%;
}
  .table_container table tbody {
    overflow: auto;
    height: 70px;
}
  .table_container table tr {
    width: 100%;
    display: table;
    text-align: left;
}
  .table_container table th,   .table_container table td {
    width:20%;
}

answered Nov 28 '16 at 08:46

Dan Triva

71
8

Thank you very much, but can we make columns and headers auto adjust depending on its content length? – Rocky Nov 28 '16 at 09:23
Just remove the width .table_container table th, .table_container table td {} and it will be adjusting automatically – Dan Triva Nov 28 '16 at 11:35
I did it but table data didn't align on its header – Rocky Nov 28 '16 at 13:54

score -1 · Answer 2 · answered Nov 28 '16 at 11:55

-1

Am not a big fan of reinventing things, so md_data_table is a good option to look at. (works with Angular 1.5.8 and will be supported in Angular2 as well)

https://github.com/iamisti/mdDataTable

bower install md-data-table --save

plankton

answered Nov 28 '16 at 11:55

Plankton

388
3
13

HTML, CSS , Table body scrolling with fix header

2 Answers2