Div can't get 100% of its content

Question

I'm trying to make scrollable table. The problem is, I can't get 100% of table content. Last table row has about 5% of his content visible. I think it's header issue, am I right ? How to fix that ?

Here's jsfiddle demo: JSFiddle DEMO

I don't know if I can ask other question in this one, but how to make table headers always visible (I mean they don't scroll with table)

score 2 · Accepted Answer · answered Sep 19 '17 at 18:43

2

You have set overflow: hidden; for body - just delete that.

answered Sep 19 '17 at 18:43

Johannes

64,305
18
73
130

Wow. That was so simple. I was not looking in that simple things. Thanks. – fanarek Sep 19 '17 at 18:46

score 1 · Answer 2 · answered Sep 19 '17 at 18:44

Try this

CSS

body {
    background-color: #e8b03a;
    overflow-x:hidden;
}

::-webkit-scrollbar {
  display: none;
  }

I think the issue is happening because your setting the overflow to hidden. This way hides the y scrolling you likely don't want but also gets rid of the scroll bar if that's not something you want visible.

andreas · Answer 3 · 2017-09-19T19:00:35.697

The bug is caused by a combination of this:

body {
  overflow: hidden;
}

and this

.scrollable {
  height: 100%;
}

The rest of the table is hidden, because the table is as high as the parent element itselfe, but the body hides the bottom content.

You can set the height to 50% to see the effect, or remove the overflow: hidden; from the body:

.scrollable {
  height: 50%;
}

body {
  background-color: #e8b03a;
  overflow: hidden;
}

.content {
  position: absolute;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

header {
  margin-bottom: 15px;
  top: 0;
  height: 200px !important;
}

.scrollable {
  height: 50%;
  overflow-y: scroll;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.scrollable::-webkit-scrollbar {
  /* This is the magic bit */
  display: none;
}

.container {
  width: 99%;
  height: 100%;
}

.container tr {
  text-align: center;
}

.container th {
  height: 25px;
  background-color: #73697f;
  border: 1px white;
}

.testtr {
  height: 105px;
}

.expandHeaderCell {
  width: 40px;
  background-color: #e8b03a !important;
}

.expand {
  width: 45px;
  height: 45px;
  background-color: red;
}

.noScroll {
  overflow: hidden;
}

table {
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
}

<h1>TESTTESTTEST</h1>

<div class="content">
  <div class="scrollable">
    <table id="TasksTable" class="container JColResizer">
      <thead>
        <tr class="table-header">
          <th style="width: 13.9%;">TEST</th>
          <th style="width: 13.9%;">TEST</th>
          <th style="width: 14%;">TEST</th>
          <th style="width: 14%;">TEST</th>
          <th style="width: 14%;">TEST</th>
          <th style="width: 14%;">TEST</th>
          <th style="width: 14%;">TEST</th>
          <th class="expandHeaderCell" style="width: 2.2%;"></th>
        </tr>
      </thead>
      <tbody>
        <tr id="7428" class="testtr" style="background-color:Pink;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="7504" class="testtr" style="background-color:Pink;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="9783" class="testtr" style="background-color:Red;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="9800" class="testtr" style="background-color:Red;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="9830" class="testtr" style="background-color:Red;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="9871" class="testtr" style="background-color:Yellow;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="9887" class="testtr" style="background-color:Yellow;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="9934" class="testtr" style="background-color:Yellow;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="10091" class="testtr" style="background-color:Pink;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="10115" class="testtr" style="background-color:Orange;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
        <tr id="8904" class="testtr" style="background-color:Yellow;">
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam ullamcorper.Lorem ipsum dolor sit amet enim. Etiam
            ullamcorper.
          </td>
          <td class="detailsCell" style="width:20px;">
            <div class="expand"></div>
          </td>
        </tr>
      </tbody>
      <tfoot></tfoot>
    </table>

To make the table header always stay on top, see this post.

Div can't get 100% of its content

3 Answers3