如何制作带有固定标题的可滚动表格

我正在尝试使用垂直和水平滚动条以及固定标题制作可滚动表格。如何制作带有固定标题的可滚动表格

但是，当我尝试使头在固定位置，我的垂直滚动条变得隐藏，只有当我滚动极右。

同样，如果我使滚动条可见，我的标题变得可移动。

请指教。

PFB我的CSS代码。

.button-container{ 
text-align: center; 
} 
table { 
border-collapse: collapse; /* make simple 1px lines borders if border defined */ 
} 
tr { 
width: 100%;`} 
.outer-container { 
position: absolute; 
top:0; 
left: 0; 
right: 300px; 
bottom:40px; 


overflow: hidden; 
} 
.inner-container { 
width: 100%; 
height: 100%; 
position: relative; 

    overflow-y:hidden; 
} 
.header-table-container { 

float:left; 
width: 100%; 
} 

.header-table{ 
background: #0088CC; 
width=100%; 
cellpadding=0; 
cellspacing=0; 
} 

.body-table-container { 
float:left; 
height: 100%; 

} 

.body-table{ 
width=100%; 
cellpadding=0; 
cellspacing=0; 

height:500px; 
} 
.header-cell { 
background-color: yellow; 
text-align: left; 
height: 40px; 
} 
.body-cell { 
background-color: blue; 
text-align: left; 
} 
.headerCol { 
width: 160px; 
min-width: 160px; 
text-align: center; 
} 
.bodyCol { 
width: 160px; 
min-width: 160px; 
} 

.resultsCol { 
width: 250px; 
min-width: 250px; 
} 

.even { 
background: lightgrey; 
} 

.button-container{ 
text-align: center; 
} 

.results{ 
text-align: left; 
} 

#preprod-wrapper{ 

} 

#prod-wrapper{ 
height:500px; 
}

来源

2016-09-14 Harish Gupta

哪里是你的HTML？提供一个工作示例（snippet/jsfiddler/something ...） – Dekel

http://stackoverflow.com/questions/17827908/how-to-make-fixed-header-table-inside-scrollable-div和http： //stackoverflow.com/questions/673153/html-table-with-fixed-headers – SchwiftyPython

你试过吗？

table { 
border-collapse: collapse; 
overflow :scroll; 
}

来源

2016-09-14 20:31:26 ADarnal

它不是太容易了，但在这里看看：

https://fiddle.jshell.net/805s75hb/

许多事情在这里使用，如position和overflow。

我希望它能帮助你。 :)

来源

2016-09-14 20:37:03

我已经使用两个表头一个头，使它静态，以便它将被修复。看一看，如果这能帮助你:)

.wrap { 
    width: 352px; 
} 

.wrap table { 
    width: 300px; 
    table-layout: fixed; 
} 

table tr td { 
    padding: 5px; 
    border: 1px solid #eee; 
    width: 100px; 
    word-wrap: break-word; 
} 

table.head tr td { 
    background: #eee; 
} 

.inner_table { 
    height: 100px; 
    overflow-y: auto;

<!DOCTYPE html> 
<html> 
<head> 

</head> 
    <body> 
<div class="wrap"> 
    <table class="head"> 
     <tr> 
      <td>Head 1</td> 
      <td>Head 1</td> 
      <td>Head 1</td> 

     </tr> 
    </table> 
    <div class="inner_table"> 
     <table> 
     <tr> 
      <td>Body 1</td> 
      <td>Body 1</td> 
      <td>Body 1</td> 

     </tr> 
      <tr> 
      <td>Body 1</td> 
      <td>Body 1</td> 
      <td>Body 1</td> 

     </tr> 

     <tr> 
      <td>Body 1</td> 
      <td>Body 1</td> 
      <td>Body 1</td> 

     </tr> 
     <!-- Some more tr's --> 
    </table> 
    </div> 
</div> 
    </body> 
    </html>

来源

2016-09-14 20:39:01 C1234

你的例子中是否也有水平滚动条？ –

是的，它有inner_table表的水平和垂直滚动选项。即使添加更多的td元素，标题表也是静态的，它应该显示全部。 – C1234

通过向Inner_table添加更多td元素来测试它们 – C1234

如何制作带有固定标题的可滚动表格

回答

相关问题