如何修复表格格式的表格标题和可滚动表格行

时间：2016-12-01 09:50:27

标签： javascript jquery html css html5

我有HTML格式的表格如下：

＆＃13;
＆＃13; 
th.th {
  position: fixed;
  background-color: white;
}
th.tl {
  position: fixed;
  background-color: white;
}
＆＃13; 
<html>

<head>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <table class="report" border="0" cellspacing="0">
    <tbody>
      <tr>
        <th class="xbrl-review" rowspan="2"></th>
        <th class="tl custom-border" colspan="1" rowspan="2">
          <div style="width: 200px;"><strong>Document and Entity Information<br></strong>
          </div>
        </th>
        <th class="xbrl-review"></th>
        <th class="th" colspan="1">3 Months Ended</th>
        <th class="xbrl-review"></th>
        <th class="th" colspan="1"></th>
      </tr>
      <tr>
        <th class="xbrl-review"></th>
        <th class="th">
          <div class="xbrl-prop-context">
            <div>
              <div>Sep. 30, 2014</div>
            </div>
          </div>
        </th>
        <th class="xbrl-review"></th>
        <th class="th">
          <div class="xbrl-prop-context">
            <div>
              <div>Nov. 07, 2014</div>
            </div>
          </div>
        </th>
      </tr>
      <tr class="re">
        <td class="xbrl-review"></td>
        <td valign="top" class="pl custom-border ex"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:0em;"><i class="icon-star blue">&#xA0;</i><strong><span class="xbrl-data-text">Document and Entity Information</span></strong></a>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">&#xA0;</span>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">&#xA0;</span>
        </td>
      </tr>
      <tr class="re">
        <td class="xbrl-review"></td>
        <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Entity Central Index Key</span></a>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">0001501078</span>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">111111111</span>
        </td>
      </tr>
      <tr class="re">
        <td class="xbrl-review"></td>
        <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Entity Central Index Key</span></a>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">0001501078</span>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">2222222</span>
        </td>
      </tr>
      <tr class="ro">
        <td class="xbrl-review"></td>
        <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Document Type</span></a>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">10-Q</span>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">3333333</span>
        </td>
      </tr>
      <tr class="re">
        <td class="xbrl-review"></td>
        <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Document Period End Date</span></a>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">Sep. 30,
     2014</span>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">4444444</span>
        </td>
      </tr>
      <tr class="ro">
        <td class="xbrl-review"></td>
        <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Amendment Flag</span></a>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">false</span>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">true</span>
        </td>
      </tr>
      <tr class="re">
        <td class="xbrl-review"></td>
        <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Current Fiscal Year End Date</span></a>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">--06-30</span>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">4566756</span>
        </td>
      </tr>
      <tr class="ro">
        <td class="xbrl-review"></td>
        <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Entity Filer Category</span></a>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">Smaller Reporting Company</span>
        </td>
        <td class="xbrl-review"></td>
        <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">Harshal</span>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

现在td内容也正在向上和下方移动到th，所以它完全搞砸了。 我的期望是格式良好的Html与修复表头（列标题）和可滚动的表行。请帮帮我。

2 个答案:

答案 0 :(得分：1)

您需要避免使用内联样式。使用单独的css样式表将有助于对表进行全面更改。例如，这是您的表格，其中包含一些基本样式。

https://jsfiddle.net/61qktez1/1/

有助于划分表行的东西：

table tbody tr:nth-of-type(2n) {
    background:#f0f0f0;
}

答案 1 :(得分：1)

这是我为你做的一个例子。我希望你期待同样的事情。

barplot(rnorm(100), col=c(rep('green', 50), rep('yellow', 50)))

.container{
width:400px;	
}
.scroallable_div{
    height: 120px;
    overflow: scroll;
    overflow-x: hidden;
}

相关问题
最新问题