我怎么能让一个桌子的身体滚动，但保持它的头固定在地方？

我写了一个网页，我需要一个 HTML 表格，以维持一套大小。我需要表格顶部的标题始终保持在那里，但是我也需要表格的主体滚动，不管向表格添加了多少行。想想 Excel 的迷你版本。这似乎是一个简单的任务，但几乎我在网上找到的每一个解决方案都有一些缺点。我该怎么解决这个问题？

239091 次浏览
小开

你有没有试过使用 thead 和 tbody，并设置一个固定的高度与溢出: 滚动？

你的目标浏览器是什么？

编辑: 它在 Firefox 中工作得很好(几乎)——垂直滚动条的添加导致了对水平滚动条的需求，同样令人讨厌。IE 只是将每个 td 的高度设置为我指定的 tbody 的高度。这是我能想到的最好的办法:

<html>
<head>
<title>Blah</title>
<style type="text/css">
table { width:300px; }
tbody { height:10em;  overflow:scroll;}
td { height:auto; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>One</th><th>Two</th>
</td>
</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
小开

这使我在为我们的应用程序实现这样一个网格时感到非常头疼。我尝试了各种各样的方法，但是每一种都有问题。我最接近的是使用了一个 jQuery 插件，比如 Flexigrid(看看 http://www.ajaxrain.com的替代品) ，但是它似乎不支持100% 宽的表，而这正是我所需要的。

我最后做的是滚动我自己的; Firefox 支持滚动 tbody元素，所以我浏览器嗅了嗅，并使用适当的 CSS (设置高度，溢出等..。.然后，对于其他浏览器，我使用了两个单独的表，设置为使用 table-layout: fixed，它使用了一个大小调整算法，保证不会溢出规定的大小(当内容太宽而不能容纳时，正常的表将会扩展)。通过给两个表相同的宽度，我能够让它们的列排成一行。我包装了第二个在一个 div 设置滚动，并与一个有点摇摆不定的空白等设法得到的外观和感觉我想要的。

如果这个答案在某些地方听起来有点含糊不清，我很抱歉; 我写得很快，因为我没有太多的时间。如果你想让我进一步扩展，请留言！

小开

我必须找到同样的答案。我发现的最好的例子是 http://www.cssplay.co.uk/menu/tablescroll.html-我发现例子 # 2对我很有用。您必须使用 JavaScript 设置内部表的高度，其余的都是 CSS。

小开

不知道是否还有人在关注这个问题，但我之前的做法是使用两个表来显示单个原始表——第一个只显示原始表标题行，没有表体行(或者一个空的表体行来验证)。

第二个是在一个单独的 div 中，没有标题，只有原始的表主体行。然后将单独的 div 变为可滚动的。

它的 div 中的第二个表位于 HTML 中第一个表的下方，看起来像一个带有固定标题和可滚动下部的单个表。我只在 Safari，Firefox 和 IE (各自在2010年春季的最新版本)中测试过，但它在所有版本中都能工作。

唯一的问题是，第一个表在没有主体(W3.org validator-XHTML 1.0严格)的情况下无法进行验证，当我添加一个没有内容的表时，它会导致一个空行。您可以使用 CSS 使其不可见，但它仍然会占用页面上的空间。

小开

下面是一段真正适用于 IE 和 FF (至少)的代码:

<html>
<head>
<title>Test</title>
<style type="text/css">
table{
width: 400px;
}
tbody {
height: 100px;
overflow: scroll;
}
div {
height: 100px;
width: 400px;
position: relative;
}
tr.alt td {
background-color: #EEEEEE;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
overflow-y: scroll;
overflow-x: hidden;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
</style>
<![endif]-->
</head>
<body>
<div >
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="background: lightgreen;">user</th>
<th style="background: lightgreen;">email</th>
<th style="background: lightgreen;">id</th>
<th style="background: lightgreen;">Y/N</th>
</tr>
</thead>
<tbody align="center">
<!--[if IE]>
<tr>
<td colspan="4">on IE it's overridden by the header</td>
</tr>
<![endif]-->
<tr>
<td>user 1</td>
<td>user@user.com</td>
<td>1</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 2</td>
<td>user@user.com</td>
<td>2</td>
<td>N</td>
</tr>
<tr>
<td>user 3</td>
<td>user@user.com</td>
<td>3</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 4</td>
<td>user@user.com</td>
<td>4</td>
<td>N</td>
</tr>
<tr>
<td>user 5</td>
<td>user@user.com</td>
<td>5</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 6</td>
<td>user@user.com</td>
<td>6</td>
<td>N</td>
</tr>
<tr>
<td>user 7</td>
<td>user@user.com</td>
<td>7</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 8</td>
<td>user@user.com</td>
<td>8</td>
<td>N</td>
</tr>
</tbody>
</table>
</div>
</body></html>

我已经改变了原来的代码，使它更清楚，也把它在 IE 和 FF 工作良好。.

原始代码 给你

小开

这是我的选择。它还对页眉、页眉和页脚使用了不同的 DIV，但对窗口大小调整以及搜索、滚动、排序、过滤和定位都是同步的:

我的 CD 清单

点击爵士乐，古典音乐... 按钮来看表格。它的设置使得即使关闭了 JavaScript，它也是足够的。

在 IE，FF 和 WebKit (Chrome，Safari)上看起来还不错。

小开

如果在这里使用 JavaScript 是可以的，那么这就是我的解决方案 在所有列上创建一个固定宽度的表(像素!)添加类 Scrollify 到表中，并添加这个 javascript + jquery 1.4.x set height in css or style！

测试内容: Opera，Chrome，Safari，FF，IE5.5(史诗剧本失败) ，IE6，IE7，IE8，IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
$("table.Scrollify").each(function (index, element) {
var header = $(element).children().children().first();
var headerHtml = header.html();
var width = $(element).outerWidth();
var height = parseInt($(element).css("height")) - header.outerHeight();
$(element).height("auto");
header.remove();
var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
"</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
$(element).parent().html() + "</div>";


$(element).parent().html(html);
});
});




//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
var scr = null;
var inn = null;
var wNoScroll = 0;
var wScroll = 0;


// Outer scrolling div
scr = document.createElement('div');
scr.style.position = 'absolute';
scr.style.top = '-1000px';
scr.style.left = '-1000px';
scr.style.width = '100px';
scr.style.height = '50px';
// Start with no scrollbar
scr.style.overflow = 'hidden';


// Inner content div
inn = document.createElement('div');
inn.style.width = '100%';
inn.style.height = '200px';


// Put the inner div in the scrolling div
scr.appendChild(inn);
// Append the scrolling div to the doc
document.body.appendChild(scr);


// Width of the inner div sans scrollbar
wNoScroll = inn.offsetWidth;
// Add the scrollbar
scr.style.overflow = 'auto';
// Width of the inner div width scrollbar
wScroll = inn.offsetWidth;


// Remove the scrolling div from the doc
document.body.removeChild(
document.body.lastChild);


// Pixel width of the scroller
return (wNoScroll - wScroll);
}

编辑: 固定高度。

小开

我发现 数据表非常灵活，虽然它的默认版本是基于 jquery 的，但也有一个 AngularJ 插件。

小开

编辑: 这是一个非常古老的回答，这里的繁荣仅仅是为了表明它曾经在2000年被支持，但在2010年的浏览器战略是尊重 W3C 规范，即使一些功能被删除: 带有固定页眉/页脚的可滚动表在 HTML5之前被笨拙地指定。

坏消息

遗憾的是，在固定 thead/tfoot的情况下，没有优雅的方法来处理可滚动的表 因为 HTML/CSS 规范并不十分清楚这个特性。

解释

虽然 HTML 4.01规格说 thead/tfoot/tbody是用来(介绍?)滚动表体的:

表行可以使用 THAD、 TFOOT 和 TBODY 元素[ ... ]进行分组。 这种划分使得用户代理能够支持独立于表头和表脚的表体滚动。

但是 FF 3.6上的可滚动表功能在 FF 3.7中已经被删除了，因为它被认为是一个 bug，因为它不符合 HTML/CSS 规范。请参阅 这个和 那个关于 FF bug 的评论。

Mozilla Developer Network

下面是 可滚动表的 MDN 实用提示的简化版本
查看此存档页面 或 < a href = “ https://developer.mozilla.org/fr/docs/Astuces _ CSS/Tableaux”rel = “ nofollow noReferrer”> 当前法语版本

<style type="text/css">
table {
border-spacing: 0;              /* workaround */
}
tbody {
height: 4em;                    /* define the height */
overflow-x: hidden;             /* esthetics */
overflow-y: auto;               /* allow scrolling cells */
}
td {
border-left:   1px solid blue;  /* workaround */
border-bottom: 1px solid blue;  /* workaround */
}
</style>


<table>
<thead><tr><th>Header
<tfoot><tr><th>Footer
<tbody>
<tr><td>Cell 1    <tr><td>Cell 2
<tr><td>Cell 3    <tr><td>Cell 4
<tr><td>Cell 5    <tr><td>Cell 6
<tr><td>Cell 7    <tr><td>Cell 8
<tr><td>Cell 9    <tr><td>Cell 10
<tr><td>Cell 11   <tr><td>Cell 12
<tr><td>Cell 13   <tr><td>Cell 14
</tbody>
</table>

然而 MDN 也说 这在 FF 上不再有用了:-(?)
我还测试了 IE8 = > 表也不可滚动: (

小开

对不起，我还没有读完对你问题的所有答复。

在这里你想要的东西(我已经做了)

对于类似的样式，可以使用两个具有相同类名的表，一个只具有表头，另一个具有行。 现在把这个表放在一个高度固定的 div 中，使用溢出-y: auto OR 滚动。

小开

我看了肖恩 · 哈迪的 类似问题的绝佳解决方案然后擅自翻译了 做一些修改:

  • 使用类而不是 ID，这样就可以重用一个 jQuery 脚本 一页上有多个表
  • 增加了对诸如标题、 head、 tfoot 和 tbody 等语义 HTML 表元素的支持
  • 将滚动条设置为可选，这样它就不会出现在比可滚动高度“短”的表中
  • 调整滚动 div 的宽度，使滚动条到达表的右边缘
  • 使概念易于理解
    • 在注入的静态表头上使用 aria-hide = “ true”
    • 并保留原始头在适当的地方，只是隐藏与 jQuery 和设置 aria-hidden="false"
  • 显示了具有不同大小的多个表的示例

不过肖恩做了很多重活，也谢谢马特 · 伯兰德指出了支撑脚的必要性。

请自己在 http://jsfiddle.net/jhfrench/eNP2N/查看

小开

我对上述建议的主要问题是能够插入 tablesorter.js，并且能够浮动一个约束为特定最大大小的表的标题。我最终偶然发现了 JQuery floatThead插件，它提供了浮动头文件，并允许排序继续工作。

它也有一个很好的比较页面显示自己对 相似的插件。

小开

我用 javascript (没有库)和 CSS 做到这一点-表体 与页面滚动,和表不必固定宽度或高度，虽然每一列必须有一个宽度。您还可以保持排序功能。

基本上:

  1. 在 HTML 中，创建容器 div 来定位表头行和 同时创建一个“掩码”div 来隐藏表的主体 滚动到标题

  2. 在 CSS 中，将表部分转换为块

  3. 在 Javascript 中，获取表的宽度并匹配掩码的宽度... get 页面内容的高度... 测量滚动位置..。 操作 CSS 来设置表头行的位置和掩码 身高

这是 javascript 和 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳

// get table width and match the mask width


function setMaskWidth() {
if (document.getElementById('mask') !==null) {
var tableWidth = document.getElementById('theTable').offsetWidth;


// match elements to the table width
document.getElementById('mask').style.width = tableWidth + "px";
}
}


function fixTop() {


// get height of page content
function getScrollY() {
var y = 0;
if( typeof ( window.pageYOffset ) == 'number' ) {
y = window.pageYOffset;
} else if ( document.body && ( document.body.scrollTop) ) {
y = document.body.scrollTop;
} else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
y = document.documentElement.scrollTop;
}
return [y];
}


var y = getScrollY();
var y = y[0];


if (document.getElementById('mask') !==null) {
document.getElementById('mask').style.height = y + "px" ;


if (document.all && document.querySelector && !document.addEventListener) {
document.styleSheets[1].rules[0].style.top = y + "px" ;
} else {
document.styleSheets[1].cssRules[0].style.top = y + "px" ;
}
}


}


window.onscroll = function() {
setMaskWidth();
fixTop();
}
小开

你需要的是:

  1. 只有当内容大于滚动窗口时，才会出现滚动，因此有一个高度 有限的表体。但是 tbody不能调整大小，你必须将它显示为 block才能这样做:

    { 自动溢出; 显示: 块; Max-height: 10em;//例如 }

  2. 重新同步表头和表体列的宽度 ，因为使后者成为 block使其成为一个不相关的元素。这样做的唯一方法是通过 将相同的列宽度强制执行到两个模拟同步。

然而，由于 tbody本身现在是一个 block，它不能再像一个 table的行为。因为您仍然需要 table行为来正确显示列，所以解决方案是要求将每一行显示为单独的 table:

thead {
display: table;
width: 100%;     // Fill the containing table
}
tbody tr {
display: table;
width: 100%;     // Fill the containing table
}

(注意，使用这种技术，您将不再能够跨行跨越)。

一旦这样做，您可以强制列宽度在 thead和 tbody中具有相同的宽度。你不可能:

  • 对于每个列(通过特定的 CSS 类或内联样式) ，这对于每个表实例来说是相当繁琐的;
  • 对于所有列(如果有5列，则通过 th, td { width: 20%; })都是一致的，这更实用(不需要为每个表实例设置宽度) ，但不适用于任何列计数
  • 通过 fixed表布局(即所有列的宽度相同) ，对任何列统一计数。

我更喜欢最后一个选项，它需要添加:

thead {
table-layout: fixed;   // Same layout for all cells
}
tbody tr {
table-layout: fixed;   // Same layout for all cells
}
th, td {
width: auto;   // Same width for all cells, if table has fixed layout
}

看一个演示 给你，从答案分叉到 这个问题。

小开

这个解决方案适用于 Chrome35、 Firefox30和 IE11(未测试其他版本)

它纯粹的 CSS: Http://jsfiddle.net/ffabreti/d4sope1u/

一切都设置为显示: 块，表需要一个高度:

    table {
overflow: scroll;
display: block;    /*inline-block*/
height: 120px;
}
thead > tr  {
position: absolute;
display: block;
padding: 0;
margin: 0;
top: 0;
background-color: gray;
}
tbody > tr:nth-of-type(1) {
margin-top: 16px;
}
tbody tr {
display: block;
}


td, th {
width: 70px;
border-style:solid;
border-width:1px;
border-color:black;
}
小开

现场 JsFiddle

这是可能的，只有 HTML 和 CSS

table.scrollTable {
border: 1px solid #963;
width: 718px;
}


thead.fixedHeader {
display: block;
}


thead.fixedHeader tr {
height: 30px;
background: #c96;
}


thead.fixedHeader tr th {
border-right: 1px solid black;
}


tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
}


tbody.scrollContent td {
background: #eee;
border-right: 1px solid black;
height: 25px;
}


tbody.scrollContent tr.alternateRow td {
background: #fff;
}


thead.fixedHeader th {
width: 233px;
}


thead.fixedHeader th:last-child {
width: 251px;
}


tbody.scrollContent td {
width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>

小开

对我来说，没有任何与滚动相关的东西真正起作用，直到我删除了表 CSS 的宽度。原来，表 CSS 看起来是这样的:

.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
margin: auto;
width: 100%;
max-width: 800px;
padding:5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}

只要我删除宽度: 100% ; 所有的滚动功能开始工作。

小开

如果你有足够低的标准;)你可以把一个只包含标题的表放在一个只有主体的表的正上方。它不会水平滚动，但如果你不需要..。


提交答案