How to set the height of table to be the size of the screen?

user_11058297 0
Viewed 957

I'm creating a table in HTML and CSS that has its own scrollbars (as opposed to the page's scrollbars).

<div class = "results">
  <table>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value3</td>
        <td>Value4</td>
      </tr>
    </tbody>
  </table>
</div>

body {
  overflow: hidden;
}

.results {
  overflow: auto;
  height: 600px;
}

This achieves what I want but only on my screen. If I look at this table on another screen or resolution then the bottom scrollbar is in a different position. How do I make sure the bottom scrollbar is always at the bottom of the screen? I tried doing this with percentages instead and the bottom bar doesn't appear at all. I also tried doing vh instead of px but that just does the same thing. I can't seem to figure out how to make sure the bottom scrollbar will always be on the bottom of the screen. It seems I have to explicitly set the height in order for the table to have its own scrollbars.

I also tried setting the height to auto but that makes it so I can't scroll at all. It looks like the height has to be a specific value.

Using vh is a lot better than using px but the bottom bar still doesn't always appear at the bottom.

css html
2 Answers

You can use the ViewHeight and ViewPort units to specify width and height of elements relative to the ones of the viewport, where 100vw is all of the viewports width. Same with Viewheight, 100vh is all of the viewports height.

here's the mdn reference for Units https://developer.mozilla.org/en-US/docs/Web/CSS/length

.results{
  height:100vh;
}

Edit

A very common problem with vw and vh is that, they don't take into consideration, things like padding, and margin. you'll have to manualy subtract those values with calc()

Let's say the sum of all the cellspacing, margin and padding is 20px

.results{
    height: calc(100vh - 20px);
}

And yes calc works with all units.

user_84242690

If it is about the horizontal scrollbar at the bottom then you can use this css. Here I'm using the flexbox instead of the old tablebox for having much more flexibility.

.results {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.results * {
  box-sizing: border-box;
  margin: 0;
}
.results table {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border-collapse: collapse;
  background-color: transparent;
}
.results thead, .results tbody {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  position: relative;
}
.results tr {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}
.results th, .results td {
  display: block;
  width: 100%;
  flex: 0 0 25%;  /* column width */
  max-width: 25%; /* column width */
  white-space: normal;
  text-align: center;
}
/* below for smartphone */
@media (max-width: 767.9px) {
  .results table {
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
<div class = "results">
  <table>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value3</td>
        <td>Value4</td>
      </tr>
    </tbody>
  </table>
</div>

If you have different width sizes for each column then you can use nth-child. In your html you can use nth-child(1)...nth-child(4) like this

.results tr th:nth-child(1),
.results tr td:nth-child(1) {
  flex: 0 0 30%;
  max-width: 30%;
}
user_51609200
Related