冻结/固定表格的顶部标题行 [英] Freezing/Fixing the Top Header Row of a table

查看：22
本文介绍了冻结/固定表格的顶部标题行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要您的帮助.我不确定如何冻结或保留我的表格的顶行，其中包含要保持冻结的标题，同时我可以滚动表格?仅使用 CSS 标记而不使用 Javascript 框架，我将如何实现这一目标?

<头><style type="text/css">/*------------------------------------------------------------------表格样式------------------------------------------------------------------ */表a:链接{颜色:#666；字体粗细:粗体；文字装饰:无；}表a:访问过{颜色:#999999；字体粗细:粗体；文字装饰:无；}表a:活动，表a:悬停{颜色:#bd5a35；文字装饰:下划线；}桌子 {字体系列:Arial、Helvetica、sans-serif；颜色:#666；字体大小:12px；背景:#eaebec;边框:#ccc 1px 实心；边框半径:3px；边框折叠:折叠；边框间距:0；框阴影:0 1px 2px #d1d1d1;最小宽度:1000px；}表 th {填充:10px 10px 10px 10px;边框顶部:0;边框底部:1px 实心 #e0e0e0;左边框:1px 实心 #e0e0e0;背景:#ededed;}表:第一个孩子{文本对齐:左；}表 tr:first-child th:first-child {边框左上角半径:3px；左边界:0；}表 tr:first-child th:last-child {边框右上角半径:3px；}表 tr {文本对齐:居中；}表 td:first-child {文本对齐:左；左边界:0；}表 td {填充:10px；边框底部:1px 实心 #e0e0e0;左边框:1px 实心 #e0e0e0;背景:#fafafa;}表 tr:last-child td {边框底部:0;}表 tr:last-child td:first-child {边框左下角半径:3px；}表 tr:last-child td:last-child {边框右下角半径:3px；}表 tr:悬停 td {背景:#f2f2f2；}表 th，表 td {宽度:160px；}#包装{宽度:740px；高度:200px；溢出-x:滚动；溢出-y:滚动；}表头{位置:固定；}</风格><身体><div id="包装器"><表格><!-- 表头--><头><tr><th>任务详情</th><th>名字</th><th>Lastname</th><th>进展</th><th>重要任务</th></tr></thead><!-- 表头--><!-- 表体--><tr><td>创建漂亮的桌子设计</td><td>&nbsp;</td><td>&nbsp;</td><td>100%</td><td>是</td></tr><!-- 表格行--><tr><td>带狗去散步</td><td>&nbsp;</td><td>&nbsp;</td><td>100%</td><td>是</td></tr><!-- 较暗的表格行--><tr><td>在 Twitter 上浪费了半天时间</td><td>&nbsp;</td><td>&nbsp;</td><td>20%</td><td>否</td></tr><tr><td>观看 Dribble 后感到自卑</td><td>&nbsp;</td><td>&nbsp;</td><td>80%</td><td>否</td></tr><tr><td>Wince at to do"列表<td>&nbsp;</td><td>&nbsp;</td><td>100%</td><td>是</td></tr><tr><td>发誓要完成个人项目</td><td>&nbsp;</td><td>&nbsp;</td><td>23%</td><td>是</td></tr><tr><td>拖延</td><td>&nbsp;</td><td>&nbsp;</td><td>80%</td><td>否</td></tr><tr><td><a href="#yep-iit-doesnt-exist">超链接示例</a></td><td>&nbsp;</td><td>&nbsp;</td><td>80%</td><td><a href="#inexistent-id">另一个</a></td></tr></tbody><!-- 表体-->

解决方案

将下面添加到 css.

表头{位置:固定；}

试试这个代码

<头><style type="text/css">/*------------------------------------------------------------------表格样式------------------------------------------------------------------ */表a:链接{颜色:#666；字体粗细:粗体；文字装饰:无；}表a:访问过{颜色:#999999；字体粗细:粗体；文字装饰:无；}表a:活动，表a:悬停{颜色:#bd5a35；文字装饰:下划线；}桌子 {字体系列:Arial、Helvetica、sans-serif；颜色:#666；字体大小:12px；背景:#eaebec;边框:#ccc 1px 实心；边框半径:3px；边框折叠:折叠；边框间距:0；框阴影:0 1px 2px #d1d1d1;}表 th {填充:10px 10px 10px 10px;边框顶部:0;边框底部:1px 实心 #e0e0e0;左边框:1px 实心 #e0e0e0;背景:#ededed;}表:第一个孩子{文本对齐:左；}表 tr:first-child th:first-child {边框左上角半径:3px；左边界:0；}表 tr:first-child th:last-child {边框右上角半径:3px；}表 tr {文本对齐:居中；}表 td:first-child {文本对齐:左；左边界:0；}表 td {填充:10px；边框底部:1px 实心 #e0e0e0;左边框:1px 实心 #e0e0e0;背景:#fafafa;}表 tr:last-child td {边框底部:0;}表 tr:last-child td:first-child {边框左下角半径:3px；}表 tr:last-child td:last-child {边框右下角半径:3px；}表 tr:悬停 td {背景:#f2f2f2；}表 th，表 td {宽度:160px；}#包装{宽度:740px；高度:300px；溢出-x:滚动；溢出-y:滚动；}桌头{位置:固定；}</风格><身体><div id="包装器"><表格><!-- 表头--><头><tr><th>任务详情</th><th>名字</th><th>进展</th><th>重要任务</th></tr></thead><!-- 表头--><!-- 表体--><tr><td>创建漂亮的桌子设计</td><td>&nbsp;</td><td>100%</td><td>是</td></tr><!-- 表格行--><tr><td>带狗去散步</td><td>&nbsp;</td><td>100%</td><td>是</td></tr><!-- 较暗的表格行--><tr><td>在 Twitter 上浪费了半天时间</td><td>&nbsp;</td><td>20%</td><td>否</td></tr><tr><td>观看 Dribble 后感到自卑</td><td>&nbsp;</td><td>80%</td><td>否</td></tr><tr><td>Wince at to do"列表<td>&nbsp;</td><td>100%</td><td>是</td></tr><tr><td>发誓要完成个人项目</td><td>&nbsp;</td><td>23%</td><td>是</td></tr><tr><td>拖延</td><td>&nbsp;</td><td>80%</td><td>否</td></tr><tr><td><a href="#yep-iit-doesnt-exist">超链接示例</a></td><td>&nbsp;</td><td>80%</td><td><a href="#inexistent-id">另一个</a></td></tr></tbody><!-- 表体-->

I need your help. I am unsure as to how to freeze or have the top row of my table, which contains the headers to remain frozen, while I would be able to scroll through the table? Using only CSS markup and NO Javascript frameworks, how would I be able to accomplish this?

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active,
table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;

    border-radius:3px;
    border-collapse:collapse; border-spacing: 0; 

    box-shadow: 0 1px 2px #d1d1d1;
    min-width: 1000px;
}
table th {
    padding:10px 10px 10px 10px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;

    background: #ededed;
}
table th:first-child {
    text-align: left;
}
table tr:first-child th:first-child {
    border-top-left-radius:3px;
    border-left: 0;
}
table tr:first-child th:last-child {
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
}
table td:first-child {
    text-align: left;
    border-left: 0;
}
table td {
    padding:10px;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
}
table tr:last-child td {
    border-bottom:0;
}
table tr:last-child td:first-child {
    border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius:3px;
}
table tr:hover td {
    background: #f2f2f2;

}
table th, table td {
    width: 160px;

}
#wrapper {
    width: 740px;
    height: 200px;
    overflow-x: scroll;
    overflow-y: scroll;
}
table thead {
    position: fixed;
}
</style>

</head>

<body>

<div id="wrapper">
<table>

    <!-- Table Header -->
    <thead>
        <tr>
            <th>Task Details</th>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Progress</th>
            <th>Vital Task</th>
        </tr>
    </thead>
    <!-- Table Header -->

    <!-- Table Body -->
    <tbody>

        <tr>
            <td>Create pretty table design</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Table Row -->

        <tr>
            <td>Take the dog for a walk</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Darker Table Row -->

        <tr>
            <td>Waste half the day on Twitter</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>20%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>Feel inferior after viewing Dribble</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>Wince at &quot;to do&quot; list</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr>

        <tr>
            <td>Vow to complete personal project</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>23%</td>
            <td>yes</td>
        </tr>

        <tr>
            <td>Procrastinate</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td><a href="#inexistent-id">Another</a></td>
        </tr>

    </tbody>
    <!-- Table Body -->

</table>
</div>

</body>
</html>

解决方案

Add below to css.

table thead {
  position: fixed;
}

Try this code

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active,
table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;

    border-radius:3px;
    border-collapse:collapse; border-spacing: 0; 

    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:10px 10px 10px 10px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;

    background: #ededed;
}
table th:first-child {
    text-align: left;
}
table tr:first-child th:first-child {
    border-top-left-radius:3px;
    border-left: 0;
}
table tr:first-child th:last-child {
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
}
table td:first-child {
    text-align: left;
    border-left: 0;
}
table td {
    padding:10px;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
}
table tr:last-child td {
    border-bottom:0;
}
table tr:last-child td:first-child {
    border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius:3px;
}
table tr:hover td {
    background: #f2f2f2;

}
table th, table td {
    width: 160px;

}
#wrapper {
    width: 740px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: scroll;
}
table thead
{
    position:fixed;
}
</style>

</head>

<body>

<div id="wrapper">
<table>

    <!-- Table Header -->
    <thead>
        <tr>
            <th>Task Details</th>
            <th>Firstname</th>
            <th>Progress</th>
            <th>Vital Task</th>
        </tr>
    </thead>
    <!-- Table Header -->

    <!-- Table Body -->
    <tbody>

        <tr>
            <td>Create pretty table design</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Table Row -->

        <tr>
            <td>Take the dog for a walk</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Darker Table Row -->

        <tr>
            <td>Waste half the day on Twitter</td>
            <td>&nbsp;</td>
            <td>20%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>Feel inferior after viewing Dribble</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td>Wince at &quot;to do&quot; list</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr>

        <tr>
            <td>Vow to complete personal project</td>
            <td>&nbsp;</td>
            <td>23%</td>
            <td>yes</td>
        </tr>

        <tr>
            <td>Procrastinate</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td><a href="#inexistent-id">Another</a></td>
        </tr>

    </tbody>
    <!-- Table Body -->

</table>
</div>

</body>
</html>

这篇关于冻结/固定表格的顶部标题行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆