我们如何使带有 html 表格标题的前三列被固定，而其他所有列都可以滚动

【问题标题】：How we make first three columns with headings of a html table to be fixed and other all columns could be scroll-able我们如何使带有 html 表格标题的前三列被固定，而其他所有列都可以滚动
【发布时间】：2020-07-14 11:40:11
【问题描述】：

这个问题让我觉得它是重复的，但是在经历了多个相关线程后，我意识到......我已经浏览了大多数相关线程 (fixed columns) 关于我的要求，并且在遵循答案后我是面临一些文本重叠问题，如下所示...

我正在尝试实现类似 使前三列的标题为 a html 要修复的表，并且所有其他列都可以滚动 .

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td,
        th {
            text-align: left;
            padding: 5px;
            word-wrap: break-word;
        }

        th {
            background: #444;
            color: white;
        }

        td.width100px div,
        th.width100px div {
            width: 100px;
        }

        td.width86px div,
        th.width86px div {
            width: 86px;
        }

        td.width120px div,
        th.width120px div {
            width: 120px;
        }

        td.width150px div,
        th.width150px div {
            width: 150px;
        }

        td div {
            word-break: break-all !important;
        }

        tr:nth-child(even) {
            background: #eee;
        }

        #main_container {
            padding: 10px;
            overflow: auto;
            margin: 5px;
            border: solid 2px darkgrey;
        }
    </style>
</head>

<body>

    <div id="main_container">
        <div style="padding: 5px 0 0 5px;z-index:1;width: 150px;position:sticky;left:0;top:0;margin-bottom: 5px;font-weight: 600;">2020-12-29</div>
        <div style="width:100%">
            <table style="width:100%">
                <tr>
                    <th class="width100px">
                        <div>EmpName</div>
                    </th>
                    <th class="width86px">
                        <div>EmpIdD</div>
                    </th>
                    <th class="width100px">
                        <div>MTN</div>
                    </th>
                    <th class="width120px">
                        <div>WorkingTime</div>
                    </th>
                    <th class="width86px">
                        <div>StartTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                    <th class="width86px">
                        <div>LunchTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                    <th class="width86px">
                        <div>EndTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                </tr>
                <tr>
                    <td class="width100px">
                        <div>William Reehil</div>
                    </td>
                    <td class="width86px">
                        <div>12345</div>
                    </td>
                    <td class="width100px">
                        <div>91657897698</div>
                    </td>
                    <td class="width120px">
                        <div>09:00-17:00</div>
                    </td>
                    <td class="width86px">
                        <div>10:30</div>
                    </td>
                    <td class="width150px">
                        <div>13th Street. 47 W 13th St, New York, NY 10011, USA</div>
                    </td>
                    <td class="width86px">
                        <div>13:00</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>16:50</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                </tr>
                <tr>
                    <td class="width100px">
                        <div>William Reehil</div>
                    </td>
                    <td class="width86px">
                        <div>12345</div>
                    </td>
                    <td class="width100px">
                        <div>91657897698</div>
                    </td>
                    <td class="width120px">
                        <div>09:00-17:00</div>
                    </td>
                    <td class="width86px">
                        <div>10:30</div>
                    </td>
                    <td class="width150px">
                        <div>NewYarkNNewYark NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>13:00</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>16:50</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                </tr>
            </table>
        </div>
        <div style="padding: 5px 0 0 5px;z-index:1;width: 150px;position:sticky;left:0;top:0;margin-bottom: 5px;font-weight: 600;">2020-12-29</div>
        <div style="width:100%">
            <table style="width:100%">
                <tr>
                    <th class="width100px">
                        <div>EmpName</div>
                    </th>
                    <th class="width86px">
                        <div>EmpIdD</div>
                    </th>
                    <th class="width100px">
                        <div>MTN</div>
                    </th>
                    <th class="width120px">
                        <div>WorkingTime</div>
                    </th>
                    <th class="width86px">
                        <div>StartTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                    <th class="width86px">
                        <div>LunchTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                    <th class="width86px">
                        <div>EndTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                </tr>
                <tr>
                    <td class="width100px">
                        <div>William Reehil</div>
                    </td>
                    <td class="width86px">
                        <div>12345</div>
                    </td>
                    <td class="width100px">
                        <div>91657897698</div>
                    </td>
                    <td class="width120px">
                        <div>09:00-17:00</div>
                    </td>
                    <td class="width86px">
                        <div>10:30</div>
                    </td>
                    <td class="width150px">
                        <div> NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>13:00</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>16:50</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                </tr>
                <tr>
                    <td class="width100px">
                        <div>William Reehil</div>
                    </td>
                    <td class="width86px">
                        <div>12345</div>
                    </td>
                    <td class="width100px">
                        <div>91657897698</div>
                    </td>
                    <td class="width120px">
                        <div>09:00-17:00</div>
                    </td>
                    <td class="width86px">
                        <div>10:30</div>
                    </td>
                    <td class="width150px">
                        <div> NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>13:00</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>16:50</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>

</html>

所以，最后 - 我想要实现这样的目标：

我可以尝试什么？

【问题讨论】：

  • 我想到的一个简单的解决方案是将其拆分为 2 个单独的表，第一个表是 3 个第一列 - 没有滚动，第二个是其余列并且可滚动。
  • 我也认为同样的@thanhdx 但是当第二个表中有更多文本时，时间行看起来错过映射:(
  • @Venki 尝试两个表的解决方案，然后解释其中的问题。
  • @DumbCoder7 好的，让我试试。
  • @DumbCoder7，请在此处查看pasteboard.co/J1X8WJx.png，因为第一个表中的文本较少，而第二个表中的文本较多，并且它正在被包裹起来，所以在这种情况下，文本将一行向下推少量。所以第一表第一行和第二表第一行不同步:(

标签： javascript jquery html css


【解决方案1】：

您可以调整标准HTML Table 以满足您的需求。

avernet 的this 回答中很好地介绍了表格的机制，因此请阅读有关直接操作表格时会遇到的问题。

您可以使用包装器和nth-child class selectors 可以在here 找到这些包装器的集合。

下面是这个包装如何工作的演示......

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
        .Light{
            background-color: lightgrey;
        }
        .Dark{
            background-color: darkgrey;
        }
        table{
            border: none;
            padding:none;
            margin:none;
            min-width: 1200px;
        }
        table tr th{
            padding-left: 15pt;
            height:24pt;
        }
        table tr td, table tr th{
            padding: 15pt;
            min-width: 150px;
        }
        
        .tableWrap{
            max-width: 800px;
            overflow-x: scroll;
        }
        .ParentPos{
            position: absolute;
        }
        .ChildPos{
            position: relative;
            left: 0;
            right:0;
            top:-0.575rem;
            bottom:0px;
            height: 100%
        }
        /*First 3 cells in the header row:*/
        table tr th:nth-child(-n+3){
            position: absolute;
            padding-top: 27pt;
            padding-bottom: 4pt;
        }
        /*First 3 cells in the content row:*/
        table tr td:nth-child(-n+3){
            position: absolute;
            padding-top: 27pt;
            padding-bottom: 16.75pt;
        }
        table tr th:nth-child(2), table tr td:nth-child(2){
            left:145pt;
        }
        table tr th:nth-child(3), table tr td:nth-child(3){
            left:287pt;
        }
        table tr th:nth-child(4){
            padding-left: 440pt;
        }
        table tr td:nth-child(4){
            padding-left: 500pt;
        }
        /*Making the spacing even out:*/
        table tr th:nth-child(n+5){
            padding-left: 0pt;
        }
        /*Making the spacing even out:*/
        table tr td:nth-child(n+5){
            padding-left: 60pt;
        }
        /*This sets alternating colours on each odd numbered column:*/
        table tr:nth-child(odd) td, table tr:nth-child(odd) th {
            background-color: lightgrey;  
        }
        /*This sets alternating colours on each even numbered column:*/
        table tr:nth-child(even) td, table tr:nth-child(even) th {
            background-color: darkgrey;  
        }
    </style>
</head>
<body>
    <div class="tableWrap">
       <table cellspacing="0">
        <tr>
            <th>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Heading 1
                    </div>
                </div>
            </td>
            <th>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Heading 2
                    </div>
                </div>
            </th>
            <th>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Heading 3
                    </div>
                </div>
            </th>
            <th>Heading 4</th>
            <th>Heading 5</th>
            <th>Heading 6</th>
            <th>Heading 7</th>
        </tr>
        <tr>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 1
                    </div>
                </div>
            </td>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 2
                    </div>
                </div>
            </td>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 3
                    </div>
                </div>
            </td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
        </tr>
        <tr>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 1
                    </div>
                </div>
            </td>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 2
                    </div>
                </div>
            </td>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 3
                    </div>
                </div>
            </td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
        </tr>
       </table>
    </div>
</body>
</html>

【讨论】：

  • 感谢@Bridge Keeper 的宝贵时间。当所有表格内容都具有相似的背景颜色时，我尝试了您的建议，但是当我们尝试在偶数和奇数内容行上使用不同的背景颜色时，文本重叠，如我的问题所示？
  • @Venki 我已经更新了答案，在奇数列和偶数列上交替显示颜色
  • 实际上我需要水平而不是垂直的替代颜色，我做了如下代码更改 table tr:nth-child(odd) { background-color: lightgrey; } table tr:nth-child(even) { background-color: darkgrey; } 然后看到文本重叠问题。你能帮忙吗？
  • 你是超级@Bridge Keeper，现在我得到了我想要的。再次感谢您的大力帮助和出色的技能。
  • 哦！是的，你是对的@Bridge Keeper，我现在没有。
猜你喜欢
  • 2012-01-27
  • 1970-01-01
  • 2016-11-24
  • 2018-02-26
  • 2014-04-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-08-05
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode