javascript - 如何修复 javascript/html/jquery 中表格的标题

标签 javascript html jquery css

我制作了一个 html javascript 页面。 我面临的问题是:

我的页面上有 2 个滚动条，在滚动与我的表格相对应的内部滚动条时，我希望我的表格标题保持固定，并且 行应该像现在向下移动一样向下移动。

我希望表头应保持固定，以便用户随时可以看到任何行的列名标题。

滚动外滚动条时，没有这样的要求。

有什么办法可以做到这一点吗？

这是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> 

.content {
padding: 15px 40px;
    overflow: auto;
    height: 565px;
}

#abc {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#abc td, #abc th {
    border: 2px solid #ddd;
    padding:8px;
    }

#abc td {
    padding-left:20px;
    font-size:14px;
}

#abc tr:nth-child(even){background-color: #f2f2f2;}

#abc tr:hover {background-color: #ddd;}

#abc th {
    padding-top: 12px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #000000b3; 
    color: #FFFFFF;
}

#abc td + td {
    text-align: center;
}

</style>    
    </head>
    <body>
    <div>
        <p>Here is my code.
            Here is my code.
            Here is my code.
            Here is my code.
            Here is my code.
</p>
<p>
Here is my code.
<br/>
Here is my code.


 </p>
<p>Here is my code.</p>
<div>               
<div>
                <div class="content">

                        <table id="abc" style="width:100%" >

      <div>
<thead>
        <tr>
            <th width="10%">column_1 </th>
            <th width="60%">column_2 </th>
            <th width="20%">column_3 </th>
            <th width="10%">column_4 </th>
        </tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
        <tr><td>a</td><td>a</td><td>a</td><td>a</td></tr>
   </thead>
   </div>

   <tbody>

   </tbody> 
</table>

<p>
Here is my code.
<br/>
Here is my code.


 </p>
            </div>


    </div>

</div>


</div>




    </body>
</html>

问候

最佳答案

请查看更新后的代码。我希望它有帮助。使用position:sticky和top:0对于 <th>标签将解决问题。我也清理了你的html。请参阅下面的代码。

HTML

<body>
    <div>
        <p>Here is my code. Here is my code. Here is my code. Here is my code. Here is my code.
        </p>
        <p>
            Here is my code.
            <br/> Here is my code.
        </p>
        <p>Here is my code.</p>
        <div>
            <div>
                <div class="content">
                    <table id="abc" style="width:100%">
                        <div>
                            <thead>
                                <tr>
                                    <th width="10%">column_1 </th>
                                    <th width="60%">column_2 </th>
                                    <th width="20%">column_3 </th>
                                    <th width="10%">column_4 </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                                <tr>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                    <td>a</td>
                                </tr>
                            </tbody>
                        </div>
                    </table>
                    <p>
                        Here is my code.
                        <br/> Here is my code.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

<style>
        .content {
            padding: 0px 40px;
            overflow: auto;
            height: 565px;
        }

        #abc {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        #abc td,
        #abc th {
            border: 2px solid #ddd;
            padding: 8px;
        }

        #abc td {
            padding-left: 20px;
            font-size: 14px;
        }

        #abc tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        #abc tr:hover {
            background-color: #ddd;
        }

        #abc th {
            padding-top: 12px;
            padding-bottom: 10px;
            text-align: center;
            background-color: #000000;
            color: #FFFFFF;
            position: sticky;
            top: 0;
        }

        #abc td+td {
            text-align: center;
        }
    </style>

关于javascript - 如何修复 javascript/html/jquery 中表格的标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61391359/

上一篇：javascript - react native : Can you conditionally render JSX based on the existence of a string?

下一篇：javascript - 如何在reactjs中使用antd多个复选框？

相关文章：

JavaScript 图形

javascript - 检查最新的div

javascript - 切换多个同名类中的 1 个的 css

Jquery选择ID中包含文本的所有元素

javascript - 如何使 Backbone 中的 JQuery 进度栏显示多个 Ajax 调用的进度？

javascript - 用于 Javascript 的 Ruby on Rails

javascript - 我如何在这个 h1 标签中显示 uinput ？

javascript - 防止div重叠

javascript - onclick 函数上的 CSS 选择器

javascript - 在 TextArea HTML 中作为标题标签

©2024 IT工具网  联系我们