Bollate

HTML

[ANSWERED] html – Trouble formatting table

By

Nov 20, 2022 , ,

Solution 1 :

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>

Solution 2 :

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)

Problem :

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.

Comments

Comment posted by fischgeek

Your question is unclear and your fiddle looks like I would expect (minus the missing quotes on some of your classes). What is your desired outcome?

Comment posted by Elcid_91

Yeah, that was pretty rookie. Let’s say I change the height of the

Comment posted by fischgeek

That makes more sense. Try

Comment posted by Elcid_91

that scrolls the container. I need the

Comment posted by stackoverflow.com/a/17380697/3903374

overflow doesn’t work for tbody elements. See

Comment posted by updated my fiddle

Thanks Chris and everyone else for their responses; however I am not getting my problem across. Chris, your solution works if the

Comment posted by Rick Hitchcock

This works for adding the scrollbar, but the thead column widths don’t match the tbody’s.

By

Related Post

HTML

[ANSWERED] html – Child div has an offset border

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022