表格滚动HTML和CSS
Moh*_*uib 61 html css html-table css3
我有一个像我填充数据的表
<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;
}
但滚动不起作用,我想修复表的高度,如果超过,则使用滚动条
Gar*_*rry 65
带固定标题的表
<table cellspacing="0" cellpadding="0" border="0" width="325">
<tr>
<td>
<table cellspacing="0" cellpadding="1" border="1" width="300" >
<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" width="300" >
<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`中的单元格对齐. (34认同)
Jan*_*roň 20
迟到的答案,另一个想法,但很短.
- 将表放入包装div
- 将标题单元格的内容放入div中
- 修复标题内容,参见CSS
HTML
<div id="scrolltable">
<table>
<tr><th><div>first col</div></th><th><div>second</div></th></tr>
<tr><td>foo</td><td>bar</td></tr>
... many rows ...
</table>
</div>
CSS
#scrolltable {
margin-top: 20px;
height: 200px;
overflow: auto;
}
#scrolltable th div {
position: absolute;
margin-top: -20px;
}
- 最好的答案在这里 (2认同)
小智 5
对于那些想知道如何用多个头实现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>小智 5
.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可以了解哪里出了问题，并且未来的访问者也可以从中学习 (3认同)
| 归档时间： |
|
| 查看次数： |
363407 次 |
| 最近记录： |