css - 创建具有固定标题的 css 可滚动表

Question

自 2 周前以来，我遇到了一个小问题，我一遍又一遍地搜索互联网和这个网站，但目前的解决方案似乎都无法解决问题。

我正在尝试升级 Web 应用程序(实际上只是它的设计)。我有一个不可滚动的表格，它是由另一个人编写的，需要用作大量关系和产品的数据输入。问题是我想固定的标题的可见性，但表格是可滚动的。我尝试过像 position:absolute 或 overflow:scroll 等 css 代码。但它们似乎都没有在表格的右侧添加滚动条。如果有人可以提供一点帮助，我们将不胜感激。这是我到目前为止的代码:

/* TABLE 
----------------------------------------------------------*/

/*table { table-layout: fixed; }*/
/*.th, .td { width: 30; break-word: word-wrap;}*/

.table
{
    table-layout: fixed;
    overflow: hidden;

    border:solid;
    border-width:thin;
    border-bottom-style:solid;
    border-color:Black;
    table-layout:fixed;
    border-collapse:collapse;
    background-color:White;
}

.tBody 
{
    margin-top:196px;
}

.tdVisible
{
    /*font-weight:normal;*/
    color:Black;
    border-spacing:0px;
    border:solid;
    border-width:thin;
    background-color: rgb(229,229,239); 
    break-word: word-wrap;
}

.tdHeader
{
    width:40px;
    break-word: word-wrap;

    /*min-width:150px;*/
    min-width:30px;

    min-height:60px;
    /*width:150px;
    height:126px;*/

    border:solid;
    border-width:thin;
    font-weight:normal;
    font-size:12px;

    /*position:fixed;*/
    overflow:hidden;
    z-index:100;
    margin-left: -2px;
    margin-top: -2px;
}

.tdRow
{
    /*width:20px;
    break-word: word-wrap;*/
    height:20px;
    max-height:22px!important;
}

.tdRowLast
{
    font-weight:bold!important;
    text-align:right!important;
}

.tdLongID
{
    /*width:60px;
    min-width: 60px;
    max-width:60px;*/
    width:60px;
    min-width:60px;
    max-width:60px;

    border:solid;
    border-width:thin;
}

.tdItemName
{   
    /*width:315px;
    min-width:315px;*/
    width:250px;    
    min-width:250px;

    border:solid;
    border-width:thin;
}

.tdShortID
{
    width:20px;
    border:solid;
    border-width:thin;
    min-width:20px;
    max-width:20px;
}

.tdCol
{
    /*width:94px;*/
    width:40px;
    break-word: word-wrap;

    border:solid;
    border-width:thin;
    font-weight:normal!important;
    padding-left: 1px;
    padding-right: 0px;
}

.tdData
{
    height:20px;
    border:solid;
    border-width:thin;
}

.tdInside
{
    width:20px;

    border:solid;
    border-width:thin;
    background-color: rgb(229,229,229);
    padding-left:1px;
    padding-right:1px;
    text-align:center;
    break-word: word-wrap;
}

所以实际上有一个 Javascript 可以创建从数据库读取的表，以便与正确的客户和产品一起使用。我想要更改的唯一一件事是将表格标题保留在一个位置，并且我能够在始终在屏幕上查看表格的同时向下滚动表格。

希望得到您的帮助。

Answer 1

使用 thead 和 tbody 应该可以工作:

Here a fiddle to start