Fatal编程技术网
  • javascript/
  • Javascript 固定标题和可滚动正文

Javascript 固定标题和可滚动正文

javascript html css

Javascript 固定标题和可滚动正文,javascript,html,css,Javascript,Html,Css,我在表中有15列。我想滚动水平和垂直和标题应该是固定的，当我滚动垂直。我试过各种各样的例子，但都不走运。我看到的所有标题列都没有与数据对齐。列宽不是固定的，因为列数根据用户选择而变化 请引导我找到正确的示例。使用css很容易实现。这一切归结于以下几点： table { overflow-x:scroll; } tbody { max-height: /*your desired max height*/ overflow-y:scroll; display:bl

我在表中有15列。我想滚动水平和垂直和标题应该是固定的，当我滚动垂直。我试过各种各样的例子，但都不走运。我看到的所有标题列都没有与数据对齐。列宽不是固定的，因为列数根据用户选择而变化

请引导我找到正确的示例。

使用css很容易实现。这一切归结于以下几点：

table {
    overflow-x:scroll;
}

tbody {
    max-height: /*your desired max height*/
    overflow-y:scroll;
    display:block;
}
为IE9更新

您应该使用一些第三方表格，如

您所能做的是使用一些视觉技巧来实现这一点， 使用两个div标记

<div class="Headers">
  <table class="NewHeader">
    <tr>
    </tr>
  </table>
</div>
<div class="Table">
  <table class="MyTable">
    <tr>
      <th>
      </th>
      ...
    </tr>
    <tr>
      <td>
      </td>
      ...
    </tr>
</div>
现在唯一要做的就是用溢出设置div“Table”的样式，所以现在如果滚动第二个表，标题将保持不变，我使用jquery简化可读性，但可以用JavaScript完成，方法相同

我发现一个系统

  • 与Internet Explorer 9+Chrome+Firefox（Windows）和Safari（Mac）兼容
  • 不使用javascript
  • 仅使用une div和一个表
  • 固定页眉和页脚（IE除外），具有可滚动的正文。标题和正文具有相同的列宽
结果:

HTML:

下面是一个使用TableRegulator和TableData类的纯javascript解决方案：


.hdrDiv
{
宽度：100%；
溢出x：隐藏；
}
tblDiv先生
{
溢出y：自动；
溢出x：隐藏；
保证金：0；
填充：0；
高度：500px；
}
.hdr
{
宽度：100%；
}
.hdr td、.tbl td
{
左侧填充：8px；
右边填充：8px；
垂直对齐：中间对齐；
边框样式：实心；
边框宽度：1px；
边框颜色：rgb（163163）；
文本对齐：左对齐；
游标：默认值；
保证金：0；
}
.hdr td
{
字体：粗体12px塔荷马；
垫面：4px；
垫底：4px；
}
.hdr td.col1
{
宽度：20%；
}
.hdr td.col2
{
宽度：20%；
}
.hdr td.col3
{
宽度：25%；
}
.hdr td.col4
{
宽度：35%；
}
.hdr，.tbl
{
表布局：固定；
最小宽度：400px；
}
.tbl td
{
字体：12px塔荷马；
}
var g_调节器=零；
var g_initRowCount=4；
函数getScrollbarWidth（）
{
var outer=document.createElement（“div”）；
outer.style.visibility=“hidden”；
outer.style.width=“100px”；
文件.正文.附件（外部）；
var widthNoScroll=外部偏移网络宽度；
outer.style.overflow=“滚动”；
var internal=document.createElement（“div”）；
inner.style.width=“100%”；
外部。子对象（内部）；
var widthWithScroll=内部偏移网络宽度；
outer.parentNode.removeChild（outer）；
返回宽度NoScroll-宽度widthWithScroll；
}
函数ExtractInt（值）
{
var regExp=/（[a-zA-Z]）/g；
value=value.replace（regExp，“”）；
返回值（value.length==0）？0:parseInt（值）；
}
函数TableData（hdrID、tableID）
{
this.m_hdrID=hdrID；
this.m_tableID=tableID；
该宽度为0.m_pbWidth；
var header=document.getElementById（this.m_hdrID）；
var table=document.getElementById（this.m_tableID）；
this.m_hasb=table？（table.parentNode.scrollHeight>table.parentNode.clientHeight）：false；
var hdrRow=（header！=null&&header.rows.length>0）？header.rows[0]：null；
var clsName=！hdrRow？“：（hdrRow.className.length>0）？hdrRow.className:（header.className.length>0）？header.className+“td”：”；
var元素=[]；
push（{prop:'padding left'，值：''}）；
push（{prop:'padding right'，值：''}）；
push（{prop:'border width'，值：''}）；
this.getcss值（'.'+clsName，元素）；
对于（变量i=0；i=0）
{
对于（变量k=0；k 0）
元素[k]。值=v；
}
}
}
}
}
TableData.prototype.Adjust=
函数（sbWidth）
{
var header=document.getElementById（this.m_hdrID）；
var table=document.getElementById（this.m_tableID）；
var hdrRow=（header！=null&&header.rows.length>0）？header.rows[0]：null；
如果（！hdrRow | |！表格）
返回；
var hasSB=table.parentNode.scrollHeight>table.parentNode.clientHeight；
header.style.width=hasb？“计算（100%-”+sbWidth.toString（）+“px）”：“100%”；
var colCount=hdrRow.cells.length；
对于（VARI=0；I0）？header.rows[0]：null；
如果（！hdrRow | |！表格）
返回；
var colCount=hdrRow.cells.length；
var rowNum=table.rows.length+1；
var r=表.插入行（-1）；

对于（var i=0；i我为这个问题创建了一个纯CSS解决方案，它可能比公认的答案对某些人更有效（我似乎一点也不起作用）。与我见过的大多数不需要固定宽度的滚动正文表格不同，我的表格有一个由其内容决定的最小宽度。如果可能，它将包装文本以避免容器溢出（遗憾的是，标题中不允许软包装），但一旦包装机会用完，就不会再窄了。这迫使父元素（通常是body标记）处理水平滚动，从而保持标题和列的同步

这里有一个

代码如下：

HTML


<div class="scrollingtable">
  <div>
    <div>
      <table>
        <caption>Top Caption</caption>
        <thead>
          <tr>
            <th><div label="Column 1"/></th>
            <th><div label="Column 2"/></th>
            <th><div label="Column 3"/></th>
            <th>
              <!--more versatile way of doing column label; requires 2 identical copies of label-->
              <div><div>Column 4</div><div>Column 4</div></div>
            </th>
            <th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
          </tr>
        </thead>
        <tbody>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
        </tbody>
      </table>
    </div>
    Faux bottom caption
  </div>
</div>




标题
第4列第4列

  <thead>
    <tr>
      <th class="nombre"><%= f.label :cost_center %></th>
      <th class="cabecera cc">Personal</th>
      <th class="cabecera cc">Dpto</th>
    </tr>
  </thead>
  <tbody>
    <% @cost_centers.each do |cc| %>
    <tr>
      <td class="nombre"><%= cc.nombre_corto %></td>
      <td class="cc"><%= cc.cacentrocoste %></td>
      <td class="cc"><%= cc.cacentrocoste_dpto %></td>
    </tr>
    <% end %>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"><a href="#">Mostrar mas usuarios</a></td>
    </tr>
  </tfoot>
</table>



div.cost_center{
  font-size:75%;
  margin-left:5px;
  margin-top:5px;
  margin-bottom: 2px;
  float: right;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
  max-height:300px;  
}

div.cost_center label { 
  float:none;
  font-size:14px;
}

div.cost_center table{
  width:300px;
  border-collapse: collapse; 
  float:right;
  table-layout:fixed;
}

div.cost_center table tr{
  height:16px;
}
div.cost_center th{
  font-weight:normal;
}

div.cost_center table tbody{
  display: block;
  overflow: auto;
  max-height:240px;
}

div.cost_center table thead{
  display:block;
}

div.cost_center table tfoot{
  display:block;
}
div.cost_center table tfoot td{
  width:280px;
}
div.cost_center .cc{
  width:60px;
  text-align: center; 
  border: 1px solid #999;
}

div.cost_center .nombre{
  width:150px;
}
div.cost_center tbody .nombre{
  border: 1px solid #999;
}

div.cost_center table tfoot td{
 text-align:center;  
 border: 1px solid #999; 
} 

div.cost_center table th, 
div.cost_center table td { 
  padding: 2px;
  vertical-align: middle; 
}

div.cost_center table tbody td {
  white-space: normal;
  font:  .8em/1.4em Verdana, sans-serif;
  color: #000;
  background-color: white;
}
div.cost_center table th.cabecera { 
  font:  0.8em/1.4em Verdana, sans-serif;
  color: #000;
  background-color: #FFEAB5;
}



<div class="scrollingtable">
  <div>
    <div>
      <table>
        <caption>Top Caption</caption>
        <thead>
          <tr>
            <th><div label="Column 1"/></th>
            <th><div label="Column 2"/></th>
            <th><div label="Column 3"/></th>
            <th>
              <!--more versatile way of doing column label; requires 2 identical copies of label-->
              <div><div>Column 4</div><div>Column 4</div></div>
            </th>
            <th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
          </tr>
        </thead>
        <tbody>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
        </tbody>
      </table>
    </div>
    Faux bottom caption
  </div>
</div>



<!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->
<style>
/*the following html and body rule sets are required only if using a % width or height*/
/*html {
  width: 100%;
  height: 100%;
}*/
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 20px 0 20px;
  text-align: center;
}
.scrollingtable {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: auto; /*if you want a fixed width, set it here, else set to auto*/
  min-width: 0/*100%*/; /*if you want a % width, set it here, else set to 0*/
  height: 188px/*100%*/; /*set table height here; can be fixed value or %*/
  min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 0 20px 0; /*need enough padding to make room for caption*/
  text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
  position: relative;
  border-top: 1px solid black;
  height: 100%;
  padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
  top: 0;
  background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
}
.scrollingtable > div > div {
  min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/
  max-height: 100%;
  overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/
  overflow-x: hidden;
  border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
  width: 100%;
  border-spacing: 0;
  margin-top: -20px; /*inverse of column header height*/
  margin-right: 17px; /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
  position: absolute;
  top: -20px; /*inverse of caption height*/
  margin-top: -1px; /*inverse of border-width*/
  width: 100%;
  font-weight: bold;
  text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
  vertical-align: bottom;
  white-space: nowrap;
  text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
  display: inline-block;
  padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px; /*match column header height*/
  border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
  position: absolute;
  top: 0;
  white-space: pre-wrap;
  color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
  content: "";
  display: block;
  min-height: 20px; /*match column header height*/
  padding-top: 1px;
  border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
  position: absolute;
  width: 100px;
  top: -1px; /*inverse border-width*/
  background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
  content: "";
  display: table-cell;
  position: relative;
  padding: 0;
  border-top: 1px solid black;
  top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
  border-bottom: 1px solid black;
  padding: 0 6px 0 6px;
  height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/