Div无法获得100％的内容

时间：2017-09-19 18:38:34

标签： html css position

我试图制作可滚动的表格。问题是，我无法获得100％的表格内容。最后一行表格中有大约5％的内容可见。我认为这是header问题，对吗？如何解决？

这里的jsfiddle演示： JSFiddle DEMO

我不知道我是否可以在这个问题中提出其他问题，但是如何让表格标题始终可见（我的意思是他们不要用表格滚动）

3 个答案:

答案 0 :(得分：2)

您已为var s = document.getElementById("1"); if( s.src != "img/clear.gif") { document.getElementById("4").src = "img/red.gif"; } 设置了overflow: hidden; - 只需将其删除即可。

答案 1 :(得分：1)

试试这个

CSS 

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

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

我认为问题正在发生，因为您将溢出设置为隐藏。这种方式隐藏了你可能不想要的y滚动，但是如果那不是你想要的东西，那么它也会摆脱滚动条。

答案 2 :(得分：1)

该错误是由以下原因引起的：

body {
  overflow: hidden;
}

和这个

.scrollable {
  height: 100%;
}

表的其余部分是隐藏的，因为该表与父元素itselfe一样高，但正文隐藏了底部内容。

您可以将高度设置为50%以查看效果，或从正文中移除overflow: hidden;：

.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>

要使表格标题始终位于顶部，请参阅this post。

相关问题
最新问题