使用 CSS 和 JavaScript 的 HTML 表的静态行和列答案

【问题标题】：Static Rows and Columns of an HTML Table using CSS and JavaScript使用 CSS 和 JavaScript 的 HTML 表的静态行和列
【发布时间】：2016-10-25 05:45:07
【问题描述】：

我希望（至少）将我的 HTML 表格的第一列作为静态列。其余列应水平滚动。如果表格垂直滚动，静态列和其他列应该一起滚动。

在旧版本的 IE 中，您可以使用 CSS 表达式来完成此操作。可以在http://www.javascripttoolbox.com/lib/scrollingdatagrid/ 找到一个示例。

知道如何将其转换为 HTML、CSS 和 JavaScript 解决方案（跨浏览器）吗？

这是我目前想出的：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <div style="position: relative; display: block; width: 200px;">
        <div style="overflow-x: auto; border: 1px solid black; width: 200px; margin-left: 120px;">
            <table>
                <tbody>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                </tbody>
            </table>
        </div></div>
            </div>
    </body>
</html>

【问题讨论】：

标签： javascript html css html-table

【解决方案1】：

你应该尝试对相同的link to plugin使用 jquery 插件

【讨论】：

我不想拥有如此臃肿的东西。我宁愿从更基本的东西开始。
@JasonN.Gaylord - 在这种情况下，您应该从问题中删除 javacript 标记，我想您打算仅使用普通的 css 和 html 来完成它，这也很简单，正如 Tran Dinh Thoai 所展示的那样
不一定。我不介意使用 JavaScript，但该插件会做我需要的一切，然后是一些。我正在寻找重量更轻的东西。

【解决方案2】：

以下代码适用于水平滚动：

<html>
<head>
<style>
.grid { width: 300px; height: auto; overflow: auto; }
.grid td.static { width: 100px; position: fixed; background-color: white; }
.grid td.dynamic { width: 100px; }
.grid td { border: solid 1px black; }
.grid table { width: 500px; }
</style>
</head>
<body>
  <div class='grid'>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class='static'>Header 1</td>
        <td class='dynamic c1'>Cell 1A</td>
        <td class='dynamic c2'>Cell 1B</td>
        <td class='dynamic c3'>Cell 1C</td>
        <td class='dynamic c4'>Cell 1D</td>
      </tr>
      <tr>
        <td class='static'>Header 2</td>
        <td class='dynamic c1'>Cell 2A</td>
        <td class='dynamic c2'>Cell 2B</td>
        <td class='dynamic c3'>Cell 2C</td>
        <td class='dynamic c4'>Cell 2D</td>
      </tr>
      <tr>
        <td class='static'>Header 3</td>
        <td class='dynamic c1'>Cell 3A</td>
        <td class='dynamic c2'>Cell 3B</td>
        <td class='dynamic c3'>Cell 3C</td>
        <td class='dynamic c4'>Cell 3D</td>
      </tr>
      <tr>
        <td class='static'>Header 4</td>
        <td class='dynamic c1'>Cell 4A</td>
        <td class='dynamic c2'>Cell 4B</td>
        <td class='dynamic c3'>Cell 4C</td>
        <td class='dynamic c4'>Cell 4D</td>
      </tr>
    </table>
  </div>
</body>
</html>

【讨论】：

它的工作方式类似于我上面展示的示例。我注意到的唯一事情如下：（1）单元格列 A 似乎部分隐藏（2）如果您使用适当的文档类型指定它是 HTML 5 文档，它似乎在 IE 中工作（3）垂直滚动效果不佳，因为静态列似乎是绝对定位的。

【解决方案3】：

也许不是最好的解决方案，但是当我看到你的例子时，我想到了什么：

制作 2 个表格，在这种情况下，第一列是一个表格，第二列和第三列是一个单独的表格，包含在第一个（静态）表格旁边的 iframe 中。这样你就可以在没有任何 JS 的情况下出来。肯定的缺点是您的第一列独立于其余列，但您肯定会获得所需的滚动效果。

【讨论】：

但是如果表格必须垂直滚动，那将如何解决我的问题？

【解决方案4】：

我想我找到了一个似乎适用于 IE 和 Chrome 的解决方案：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js"></script>
        <script type="text/javascript">
            function scrollTable() {
                var column1 = $("#dailyWorkColumn1");
                var column2 = $("#dailyWorkColumn2");
                column1.scrollTop(column2.scrollTop());
                }

            $(document).ready(function() {
                var column2 = $("#dailyWorkColumn2");
                var column2right = $('#dailyWorkColumn2 tbody td:nth-child(2)')[0].offsetLeft;
                column2.scrollLeft(column2right);
                });
        </script>
        <style type="text/css">
            .dailyWorkColumn1 { overflow: hidden; width: 100px; height: 280px; border: 1px solid blue; position: absolute; left: 10px; top: auto; }
            .dailyWorkColumn2 { overflow: auto; border: 1px solid red; margin-left: 102px; height: 300px; width: 400px; }
        </style>
    </head>
    <body>
       <div style="overflow-y: visible; overflow-x: hidden; border: 1px solid black;">
            <div class="dailyWorkColumn1" id="dailyWorkColumn1">
                <table style="width: 100px;">
                    <tr>
                        <td style="border: 1px solid purple;">Jason</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Jeff</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Dave</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Mike</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Michael</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Lori</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Ashley</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Sean</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Louis</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Chris</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Aaron</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Marie</td>
                    </tr>
                </table>
            </div>
            <div class="dailyWorkColumn2" id="dailyWorkColumn2" onscroll="scrollTable();">
                <table>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            123456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            223456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            323456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            423456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            523456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            623456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            723456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            823456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            923456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            103456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            113456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            123456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                </table>
            </div>
       </div> 
    </body>
</html>

【讨论】：

如果我在第一个表格单元格中放置更长的文本会怎样。？整个对齐将消失..：P