3

So I have an HTML table, with a thead and tbody. I would like to have the body part of the table to scroll, while keeping the header part where it is. I found a solution to that by having the thead and tbody as a block display, however once I do that, the content gets push to the left, instead of stretching the whole table. The scrollbar is where it should be (all the way on the right) but the contents is crushed and then the table data doesn't line up with the headers. If I take away display:block from the thead and tbody, everything lines up perfectly however I can't get a scrollbar to appear. Any suggestions?

This is my full code. If you take out the display:block in both the thead and tbody, that's how it should look (at least the width of it and alignment)

table {
  width:800px;
  margin-top:30px;
  margin-bottom:30px;
  border-collapse:collapse;
}

th {
  background-color:rgb(216,191,216);
  text-align:center;
  margin:0px;
}

td {
  text-align:center;
  border-bottom:1px dashed black;
  padding-top:5px;
  padding-bottom:5px;
}

.tableHeading {
  font-size:25px;
}

.leftBorder {
  border-left:1px dashed black;
}

.rightBorder {
  border-right:1px dashed black;
}

thead {
  display:block;
}

tbody {
  display:block;
  overflow-y:auto;
  max-height:100px;
}
<div class='center'>
  <table>
      <thead>
      <tr><th colspan="5" class='tableHeading'>Receipts</th></tr>
      <tr>
          <th>Name</th>
          <th>Price</th>
          <th>Date</th>
          <th>Category</th>
          <th>Comment</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>One</td>
          <td>1</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      <tr>
          <td>Two</td>
          <td>2</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      <tr>
          <td>Three</td>
          <td>3</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      <tr>
          <td>Four</td>
          <td>4</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      <tr>
          <td>Five</td>
          <td>5</td>
          <td>Mon</td>
          <td>Uncategorized</td>
          <td></td>
      </tr>
      </table>
  </div>
SuperDJ
  • 7,488
  • 11
  • 40
  • 74
Vince
  • 2,596
  • 11
  • 43
  • 76
  • 1
    Possible duplicate of [HTML table with 100% width, with vertical scroll inside tbody](https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) –  Oct 21 '18 at 13:09
  • I was trying to avoid using any sort of javascript, but I guess it will have to do. I tweaked it up a bit since I don't have jQuery, and don't plan to use it. I know it makes things easier but I like working harder ;) – Vince Oct 22 '18 at 06:38

0 Answers0