Question

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

但是当我尝试将标题置于固定位置时，我的垂直滚动条会变为隐藏状态，只有当我向右滚动时才会出现。

类似地，如果我使滚动条可见，我的标题变为可移动。

请告知。

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;
}

Answer 1

这不太容易，但请看一下：

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

此处使用了很多内容，例如position和overflow。

我希望它可以帮到你。：）

Answer 2

你试过这个吗？

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

Answer 3

我使用了两个表格作为标题使其静止，以便它可以修复。看看这可以帮助你:)

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

如何制作带有固定标题

3 个答案: