CODEWITHSUNDEEP
htmlcsshtml-table
Elcid_91
Elcid_91

Reputation: 1681

Trouble formatting table

I am attempting to format a table and , for some reason I cannot figure out, the overflow on the <tbody> does not work properly (at all):

Using the following CSS:

body,
html {
  height: 100%;
  margin: 0;
}

.outside {
  height: 100%;
  display: flex;
  flex-flow: column;
  background-color: pink;
}

.outside .header,
.outside .footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}
.content{
  flex: 1;
  background-color: violet;
}
.data-grid{  
  table-layout: fixed;  
  border-collapse: collapse;
}
.data-grid thead{
  background-color:lightblue;
}
.data-grid tbody{
  height: 100%;
  overflow-y:scroll;
}

The table body pushed the footer down and does not show a scroll bar.

I have placed my fiddle here. A little insight would be appreciated.

Upvotes: 1

Views: 59

Answers (2)

Chris W.
Chris W.

Reputation: 23290

Here ya go, with some cleaned up semantics and simplified used of good 'ol fashioned box model. Have a great weekend!

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.header,
.footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}

.content {
  background-color: violet;
}

.data-grid {
  max-height: 200px;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.data-grid th:not(:first-child), .data-grid td:not(:first-child) {
  border-left: gray 1px solid;
}

.data-grid thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: lightblue;
  width: calc(100% - 17px); /* Average scrollbar width to keep columns aligned + border width */
}

.data-grid tbody tr {
  display:table;
  width:100%;
  table-layout:fixed
}

.data-grid tbody {
  display: block;
  height: 200px;
  width: 100%;  
  overflow-y: scroll;
  overflow-x: hidden;
}
<div class="header">Table Header Here</div>
<div class="content">
  <table class="data-grid">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
      <tr>
        <td> Data1-1</td>
        <td> Data1-2</td>
        <td> Data1-3</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="footer">Table Footer Here</div>

Upvotes: 2

chris
chris

Reputation: 799

Move these three styles from your .outside styles to your .data-grid styles:

  height: 200px;
  display: flex;
  flex-flow: column;

Here is the code with just those changes: 

body,
html {
  height: 100%;
  margin: 0;
}

.outside {
  background-color: pink;
}

.outside .header,
.outside .footer {
  background-color: grey;
  font-size: 18px;
  color: blue;
}
.content{
  flex: 1;
  background-color: violet;
}
.data-grid{  
  height: 200px;
  display: flex;
  flex-flow: column;
  table-layout: fixed;  
  border-collapse: collapse;
}
.data-grid thead{
  background-color:lightblue;
}
.data-grid tbody{
  height: 100%;
  overflow-y:scroll;
}
<div class="outside">
  <div class="header">Table Header Here</div>
  <div class="content">
    <table class="data-grid">
      <thead>
        <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
        <tr>
          <td> Data1-1</td>
          <td> Data1-2</td>
          <td> Data1-3</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class=footer>Table Footer Here</div>
</div>

(Run the above snippet and expand in full page view to eliminate extra scroll bar caused by small stackoverflow window)

Upvotes: 0

Related Questions