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

使用固定标头创建css可滚动表

1 个答案: