相关疑难解决方法(0)

我正在编写一个页面,我需要一个HTML表来维护一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.想想一个迷你版的excel.这似乎是一项简单的任务,但我在网上找到的几乎所有解决方案都有一些缺点.我怎么解决这个问题？

我正在尝试设计一个HTML表格,当用户将其滚出视图时,标题将保留在页面顶部.例如,该表可能距离页面500像素,如何使其成为如果用户将标题滚出视图(浏览器不再以某种方式检测到它在窗口视图中),它将保持在顶部？任何人都可以给我一个Javascript解决方案吗？

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

所以在上面的例子中,<thead>如果它不在视图中,我希望滚动页面.

重要提示:我不是在寻找<tbody>具有滚动条(溢出:自动)的解决方案.

在查看大表时,请参阅窗口顶部始终可见的HTML表格标题

Craig McQueen提供的解决方案非常适合IE7,这是我目前所需要的.但是,我用不同的浏览器测试过,当我向下滚动时,标题会轻弹/闪烁.我该如何解决？

我有以下样式和HTML,但是当它显示时,表格显示为已损坏(所有表格行和单元格都已损坏).我不确定为什么; 我该怎么解决？

tbody需要这个尺寸: height: calc(100vh - 130px);

红线定义表的大小.

编辑:我tbody需要滚动,thead需要修复.

jsfiddle:https://jsfiddle.net/zuxq2gr0/11/

.col-lg-12 {
  border: 1px solid red;
}

tbody {
  display: block;
  overflow-y: scroll;
  height: calc(100vh - 130px);
}

tbody > tr {
  display: table;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="col-lg-8 ">
  <div class="col-lg-12">
    <table class="table table-striped" aurelia-table="">
      <thead>
        <tr>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control …

我正在翻新遗留的Java webapp.我重新设置了一个显示数据库搜索结果的屏幕.搜索可能会产生大量结果.旧版本只打印了所有内容.我通过放入一些div和CSS来更好地使用,以便在需要时出现水平和垂直滚动条.

这不是很好.当垂直滚动许多行时,用户会看不到列标题.将列标题放在它们自己的div中并不是一个很好的解决方案,因为JUST ENOUGH列也需要水平滚动.用户将无法垂直滚动结果,然后水平滚动列名称.

是否有人愿意推荐一种不涉及花钱或涉及学习全新框架或系统的解决方案？

我不需要高功率的东西.就像我写的那样,如果列数减少了2-3,我可能不需要水平滚动,只需将标题放在自己的固定div中.