0

I am trying to set an html table to a fixed height (around five rows), scrollable with the headers fixed. I tried setting tbody to overflow-y: scroll, and the rule isn't showing up in Chrome or Firefox. I also tried setting the parent div's height. When I set display to block, it just shrinks the width of the div. 

tbody.datatable{
     width:630px;
     height:100px;
     overflow-y: auto;
     }

Is there any other element in my html that is preventing tbody from being scrollable?

Here is my jsfiddle: https://jsfiddle.net/29jr5eo8/

EDIT: solutions have been linked that set display:block --this makes headers change width, and my table is still not changing height. It seems like the problem is class="divtable" is not showing up in the css calculation rules. display:block has no effect on the height of the div.

Jeanne Lane
  • 495
  • 1
  • 9
  • 26
  • Here is the fiddle with that solution, still not changing the height of the table. https://jsfiddle.net/5auqewgy/ – Jeanne Lane Jul 01 '19 at 23:53
  • @ChrisM I was able to solve it with this and the input from the others (removing table layout, more div tags). Should I still delete this? – Jeanne Lane Jul 05 '19 at 16:23
  • 1
    Personally I see no harm in leaving it. It's marked as duplicate which is all that should happen. I would always err on the side of not deleting something rather than deleting it, and in this case it doesn't seem like it would cause any harm to leave it. If anything duplicates help add more ways of discovering content. I have no idea what others in the community would say but that's my thoughts at least. – ChrisM Jul 08 '19 at 16:23

3 Answers3

1

Tables are meant for tabular data: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

For layouting, use appropriate HTML tags: https://css-tricks.com/snippets/html/html5-page-structure/

Your datatable is a prime example of a good use of the <table> element. Put in the right container (like <div>), and set that container's height (or max-height) and overflow-y.

GaloisGirl
  • 1,476
  • 1
  • 8
  • 14
1

I have already answered this before here. You can do this way by setting position: sticky;

table thead tr th {
  background-color: white;
  position: sticky;
  top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<table class="table">
  <thead>
    <tr>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>

</table>
Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
0

Table's dont unfortunalty support native overflow properties so you have to do some work to get it to 'work'.

first step will be: setting tbody to display:block so that we can apply the height and overflow property.

next step will be: setting the thead & tr to display:block

.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}
<table class="fixed_header">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>
Liam Geary
  • 139
  • 1
  • 10
  • 1
    This doesn't address the problem of keeping consistent column widths, and is a straight copy and paste from https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc . The codepen featured there that you took this from includes CSS that normalises the collumn widths, which you failed to include in your copy paste... :-/ – ChrisM Jul 01 '19 at 17:00