带有 HTML 和 CSS 的表格滚动 [重复]
Posted
技术标签:
【中文标题】带有 HTML 和 CSS 的表格滚动 [重复]【英文标题】：Table scroll with HTML and CSS [duplicate] 【发布时间】：2013-01-27 20:33:38 【问题描述】：我有一个类似的表格，里面填满了数据
<table id="products-table" style="overflow-y:scroll" >
<thead>
<tr>
<th>Product (Parent Product)</th>
<th>Associated Sites</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.Count(); i++)
<tr>
<td>
<a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br />
</td>
<td>
<span class="lesser"></span>
</td>
<td>@html.ActionLink("Edit Product", "Edit", "Products")<br />
@Html.ActionLink("Associate Site", "Associate", "Products")
</td>
</tr>
<tr>
</tbody>
</table>
和这样的 CSS
#products-table
width: 200px;
height: 400px;
overflow:scroll;
但滚动不起作用，我想修复表格的高度，如果超过，则使用滚动条
【问题讨论】：
一个非常好的实现（我认为）在这里发布：***.com/a/57524791 【参考方案1】：带有固定标题的表格
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" >
<tr style="color:white;background-color:grey">
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:320px; height:80px; overflow:auto;">
<table cellspacing="0" cellpadding="1" border="1" >
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
<tr>
<td>new item</td>
<td>new item</td>
</tr>
</table>
</div>
</td>
</tr>
</table>结果
这适用于所有浏览器
演示 jsfiddle http://jsfiddle.net/nyCKE/6302/
【讨论】：
此方法不会将thead 中的单元格与tbody 中的单元格对齐。
这种情况下唯一的问题是，由于宽度不匹配，thead 单元格将不会与 tbody 单元格对齐。这是一个解决方法：jsfiddle.net/ogcbuwjL
这会让你溢出，因为你还覆盖了 tbody 的 display 从 table-row-group 到 block。这也是元素没有按预期排列的原因。
问题没有解决。更改您的标题标题长度，您将看到标题与下面的行不匹配。
大家好，感谢通知单元格对齐问题我已更新 jsfidle 以与单元格对齐。【参考方案2】：
迟到的答案，另一个想法，但很短。
-
将标题单元格的内容放入div中
修复标题contents，参见CSS
table margin-top: 20px; display: inline-block; overflow: auto;
th div margin-top: -20px; position: absolute;
请注意，由于anonymous table objects，可以将表格显示为内联块：
"missing" [in HTML table tree structure] 必须假定元素才能使表格模型工作。任何表格元素都会在其周围自动生成必要的匿名表格对象。
/* scrolltable rules */
table margin-top: 20px; display: inline-block; overflow: auto;
th div margin-top: -20px; position: absolute;
/* design */
table border-collapse: collapse;
tr:nth-child(even) background: #EEE; <table style="height: 150px">
<tr> <th><div>first</div> <th><div>second</div>
<tr> <td>foo <td>bar
<tr> <td>foo foo foo foo foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar bar bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
<tr> <td>foo <td>bar
</table>截至 2016 年
实现此目的的正确方法是position: sticky - 请参阅链接中的演示。
【讨论】：
我不得不稍微调整一下边距和对齐方式。但它在不同的浏览器中都能完美运行。【参考方案3】：对于那些想知道如何使用多个标题实现 Garry 的解决方案的人来说，就是这样：
#wrapper
width: 235px;
table
border: 1px solid black;
width: 100%;
th,
td
width: 100px;
border: 1px solid black;
thead>tr
position: relative;
display: block;
tbody
display: block;
height: 80px;
overflow: auto;
<div id="wrapper">
<table>
<thead>
<tr>
<th>column1</th>
<th>column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row4</td>
</tr>
</tbody>
</table>
</div>【讨论】：
【参考方案4】：仅适用于 Chrome，但它可以适应其他现代浏览器。表回退到其他浏览器中带有滚动条的普通表。 使用 CSS3 FLEX 属性。
http://jsfiddle.net/4SUP8/1/
<table border="1px" class="flexy">
<caption>Lista Sumnjivih vozila:</caption>
<thead>
<tr>
<td>Opis Sumnje</td>
<td>Registarski<br>broj vozila</td>
<td>Datum<br>Vreme</td>
<td>Brzina<br>(km/h)</td>
<td>Lokacija</td>
<td>Status</td>
<td>Akcija</td>
</tr>
</thead>
<tbody>
<tr>
<td>Osumnjičen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjičen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjičen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
<tr>
<tr>
<td>Osumnjičen tranzit</td>
<td>NS182TP</td>
<td>23-03-2014 20:48:08</td>
<td>11.3</td>
<td>Raskrsnica kod pumpe<br></td>
<td></td>
<td>Prikaz</td>
</tr>
</tbody>
</table>
样式（CSS 3）：
caption
display: block;
line-height: 3em;
width: 100%;
-webkit-align-items: stretch;
border: 1px solid #eee;
.flexy
display: block;
width: 90%;
border: 1px solid #eee;
max-height: 320px;
overflow: auto;
.flexy thead
display: -webkit-flex;
-webkit-flex-flow: row;
.flexy thead tr
padding-right: 15px;
display: -webkit-flex;
width: 100%;
-webkit-align-items: stretch;
.flexy tbody
display: -webkit-flex;
height: 100px;
overflow: auto;
-webkit-flex-flow: row wrap;
.flexy tbody tr
display: -webkit-flex;
width: 100%;
.flexy tr td
width: 15%;
【讨论】：
【参考方案5】：这对我有用
演示：jsfiddle
$(function()
Fixed_Header();
);
function Fixed_Header()
$('.User_Table thead').css('position': 'absolute');
$('.User_Table tbody tr:eq("2") td').each(function(index,e)
$('.User_Table thead tr th:eq("'+index+'")').css('width' : $(this).outerWidth() +"px" );
);
var Header_Height = $('.User_Table thead').outerHeight();
$('.User_Table thead').css('margin-top' : "-"+Header_Height+"px");
$('.User_Table').css('margin-top' : Header_Height+"px");
【讨论】：
【参考方案6】：<div style="overflow:auto">
<table id="table2"></table>
</div>
试试这个代码的溢出表 它只适用于 div 标签
【讨论】：
【参考方案7】：为溢出的 HTML 表格元素添加渐变渐变，以更好地指示有更多内容需要滚动。
表头固定 溢出滚动渐变 自定义滚动条请看下面的实例：
$("#scrolltable").html("<table id='cell'><tbody></tbody></table>");
$("#cell").append("<thead><tr><th><div>First col</div></th><th><div>Second col</div></th></tr></thead>");
for (var i = 0; i < 40; i++)
$("#scrolltable > table > tbody").append("<tr><td>" + "foo" + "</td><td>" + "bar" + "</td></tr>");
/* Table with fixed header */
table,
thead
width: 100%;
text-align: left;
#scrolltable
margin-top: 50px;
height: 120px;
overflow: auto;
width: 200px;
#scrolltable table
border-collapse: collapse;
#scrolltable tr:nth-child(even)
background: #EEE;
#scrolltable th div
position: absolute;
margin-top: -30px;
/* Custom scrollbar */
::-webkit-scrollbar
width: 8px;
::-webkit-scrollbar-track
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
::-webkit-scrollbar-thumb
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
/* Overflow scroll gradient */
.overflow-scroll-gradient
position: relative;
.overflow-scroll-gradient::after
content: '';
position: absolute;
bottom: 0;
width: 240px;
height: 25px;
background: linear-gradient( rgba(255, 255, 255, 0.001), white);
pointer-events: none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-scroll-gradient">
<div id="scrolltable">
</div>
</div>【讨论】：
【参考方案8】： .outer
overflow-y: auto;
height: 300px;
.outer
width: 100%;
-layout: fixed;
.outer th
text-align: left;
top: 0;
position: sticky;
background-color: white;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MYCRUD</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid col-md-11">
<div class="row">
<div class="col-lg-12">
<div class="card-body">
<div class="outer">
<table class="table table-hover bg-light">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Marca</th>
<th scope="col">Editar</th>
<th scope="col">Eliminar</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>Toyota</td>
<td> <a class="btn btn-success" href="#">
<i class="fa fa-edit"></i>
</a>
</td>
<td> <a class="btn btn-danger" href="#">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Honda </td>
<td> <a class="btn btn-success" href="#">
<i class="fa fa-edit"></i>
</a>
</td>
<td> <a class="btn btn-danger" href="#">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<tr>
<td>5</td>
<td>Myo</td>
<td> <a class="btn btn-success" href="#">
<i class="fa fa-edit"></i>
</a>
</td>
<td> <a class="btn btn-danger" href="#">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<tr>
<td>6</td>
<td>Acer</td>
<td> <a class="btn btn-success" href="#">
<i class="fa fa-edit"></i>
</a>
</td>
<td> <a class="btn btn-danger" href="#">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<tr>
<td>7</td>
<td>HP</td>
<td> <a class="btn btn-success" href="#">
<i class="fa fa-edit"></i>
</a>
</td>
<td> <a class="btn btn-danger" href="#">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<tr>
<td>8</td>
<td>DELL</td>
<td> <a class="btn btn-success" href="#">
<i class="fa fa-edit"></i>
</a>
</td>
<td> <a class="btn btn-danger" href="#">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<tr>
<td>9</td>
<td>LOGITECH</td>
<td> <a class="btn btn-success" href="#">
<i class="fa fa-edit"></i>
</a>
</td>
<td> <a class="btn btn-danger" href="#">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
虽然这个答案解决了 OP 的问题。答案应该提到代码中的更改以及更改的原因，以便 OP 可以了解他们出错的地方，并且未来的访问者也可以从中学习【参考方案9】：不管现在值多少钱：这是另一个解决方案：
在display: inline-block 中创建两个 div
在第一个div中，放一个只有表头的表（表头表tabhead）
在第二个div中，放一个表头和数据（数据表/全表tabfull）
使用javascript，使用setTimeout(() => /*...*/)在渲染后/用fetch的结果填充表格后执行代码
测量数据表中每个th的宽度（使用clientWidth）
对标题表中的对应项应用相同的宽度
将数据表标题的可见性设置为隐藏，并将上边距设置为 -1 * 数据表标题像素的高度
经过一些调整，这是使用的方法（为了简洁/简单，我使用了 d3js，可以使用普通 DOM 完成相同的操作）：
setTimeout(() => // pass one cycle
d3.select('#tabfull')
.style('margin-top', (-1 * d3.select('#tabscroll').select('thead').node().getBoundingClientRect().height) + 'px')
.select('thead')
.style('visibility', 'hidden');
let widths=[]; // really rely on COMPUTED values
d3.select('#tabfull').select('thead').selectAll('th')
.each((n, i, nd) => widths.push(nd[i].clientWidth));
d3.select('#tabhead').select('thead').selectAll('th')
.each((n, i, nd) => d3.select(nd[i])
.style('padding-right', 0)
.style('padding-left', 0)
.style('width', widths[i]+'px'));
)
等待渲染周期具有在整个过程中使用浏览器布局引擎的优势 - 对于任何类型的标题；它不受特殊条件或单元格内容长度以某种方式相似的约束。它还可以针对可见的滚动条进行正确调整（如在 Windows 上）
我在这里建立了一个带有完整示例的代码笔：https://codepen.io/sebredhh/pen/QmJvKy
【讨论】：
以上是关于带有 HTML 和 CSS 的表格滚动 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
基于 CSS DIV 的表格，带有标题和有限高度，必要时显示滚动条 - 百分比高度