我怎样才能用 Scroll 制作一个 Table 并用 CSS 代码固定 Header，这在任何情况下和手机上看起来都不错？
How can I make a Table with a Scroll and fixed Header with CSS code, which looks good in any circumstance and on the cellphone too?
为了在我的 Asp.Net 核心代码的多个 table 上使用，我想要一个 CSS code/style 作为我的 table，这将使它们都具有滚动条，但 table header 固定，确保所有行和列都彼此对齐。由于某种原因很难找到的东西，因为我尝试了几种替代方法，但它们对我来说都非常糟糕，因为我测试的不同代码完全未对齐 header 与下面的列，或者列从未很好地适应文本的宽度等。
所以，过了一段时间，我想出了这个样式代码：
<style>
* {
box-sizing: border-box;
}
.wrapper2 {
height: 30vw;
overflow-y: scroll;
}
.card {
background-color: #fff;
border-radius: 10px;
margin: 10% auto;
position: relative;
padding: 34px;
color: #444;
cursor: pointer;
overflow-x: auto;
}
.card:before {
display: block;
position: absolute;
background-color: #ccc;
z-index: -1;
box-shadow: 0 0 40px #999999;
transition: box-shadow .2s ease-in-out;
}
.card.level-3:hover:before {
box-shadow: 0 0 80px #999999;
}
.table {
border-collapse: collapse;
width: 100%;
}
.table td {
overflow: hidden;
word-break: normal;
text-align: center;
}
.table th {
text-align: center;
word-break: normal;
}
.tablealign {
float: right;
width: 100%;
height: 100%;
border-radius: 3px;
padding-bottom: 50px;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 336px;
display: block;
}
thead {
display: table;
width: calc(100% - 17px);
table-layout: fixed;
}
tbody tr {
table-layout: fixed;
display: table;
width: 100%;
}
div.c {
line-height: 1%;
}
</style>
视图中的其余代码：
<div class="container">
<div class="card level-3">
<h3>Blablabla</h3>
<div class="tablealign">
<div></div>
<table class="table table-sm table-bordered">
<thead class="thead-dark">
<tr>
<th>
<div>Name of The Person</div>
</th>
<th>
<div>Date of The Thing Cre</div>
</th>
<th>
<div>Name of The Universe</div>
</th>
<th>
<div>A Stuff of 4</div>
</th>
<th>
<div>A Stufff Of</div>
</th>
<th>
<div>Hour At Create</div>
</th>
<th>
<div>Hour At Lifeee</div>
</th>
<th><div></div></th>
<th>
<a class="btn btn-sm btn-primary" asp-action="Filtro" asp-route-id="">
SEARCH
</a>
</th>
<th><div></div></th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.Modelito)
{
<tr>
<td>
@item.Nom
</td>
<td>
@item.Fech
</td>
<td>
@item.NombM
</td>
<td>
@item.Momo
</td>
<td>
@item.RA
</td>
<td>
@item.Ho
</td>
<td>
@item.HourF
</td>
<td>
<a class="btn btn-sm btn-primary" asp-action="Edit" asp-route-id="@item.Id">
EDIT
</a>
</td>
<td>
<a class="btn btn-sm btn-primary" asp-action="Details" asp-route-id="@item.Id">
DETAILS
</a>
</td>
<td>
<a class="btn btn-sm btn-danger" asp-action="Delete" asp-route-id="@item.Id">
DELETEthis
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
网站上的所有代码如下所示：
效果很好，不错，但我希望 header 的宽度和列文本更适合，就像你知道的那样……tbody 通常使用 [= 的方式37=] 当它只是一个普通的 table 并且文本在视觉上调整得很好，但是当你要求这个东西有一个不移动头部的滚动时， CSS 代码似乎完全丢失它的想法是出于我压缩之外的原因。
然而，除了改进这个细节之外，我的代码还产生了以下巨大问题，即 View 在手机上看起来像这样...:[=18=]
是的，这看起来很糟糕。
我怎样才能改进我的代码，得到我真正想要的 table，并且让它在手机上看起来不错？在此先感谢您的阅读，我真的需要帮助。
您可以将样式 table-responsive 与 bootstrap 结合使用。
<div class="table-responsive-sm tablealign">
...
然后将table-layout更改为auto，并将mine-width分配给.table th。然后更改 .table 宽度和 srollbar 的宽度 。全部款式都在这里。
<style>
* {
box-sizing: border-box;
}
.wrapper2 {
height: 30vw;
overflow-y: scroll;
}
.card {
background-color: #fff;
border-radius: 10px;
margin: 10% auto;
position: relative;
padding: 34px;
color: #444;
cursor: pointer;
overflow-x: auto;
}
.card:before {
display: block;
position: absolute;
background-color: #ccc;
z-index: -1;
box-shadow: 0 0 40px #999999;
transition: box-shadow .2s ease-in-out;
}
.card.level-3:hover:before {
box-shadow: 0 0 80px #999999;
}
.table {
border-collapse: collapse;
width: 95%;
}
.table td {
overflow: hidden;
word-break: normal;
text-align: center;
}
.table th {
text-align: center;
word-break: normal;
min-width: 100px;
}
.tablealign {
float: right;
width: 100%;
height: 100%;
border-radius: 3px;
padding-bottom: 50px;
}
tbody {
overflow-y: auto;
overflow-x: hidden;
height: 336px;
display: block;
}
tbody::-webkit-scrollbar {
width: 0;
}
thead {
display: table;
width: calc(100% - 17px);
table-layout: auto;
}
tbody tr {
table-layout: fixed;
display: table;
width: 100%;
}
div.c {
line-height: 1%;
}
</style>
为了在我的 Asp.Net 核心代码的多个 table 上使用，我想要一个 CSS code/style 作为我的 table，这将使它们都具有滚动条，但 table header 固定，确保所有行和列都彼此对齐。由于某种原因很难找到的东西，因为我尝试了几种替代方法，但它们对我来说都非常糟糕，因为我测试的不同代码完全未对齐 header 与下面的列，或者列从未很好地适应文本的宽度等。
所以，过了一段时间，我想出了这个样式代码：
<style>
* {
box-sizing: border-box;
}
.wrapper2 {
height: 30vw;
overflow-y: scroll;
}
.card {
background-color: #fff;
border-radius: 10px;
margin: 10% auto;
position: relative;
padding: 34px;
color: #444;
cursor: pointer;
overflow-x: auto;
}
.card:before {
display: block;
position: absolute;
background-color: #ccc;
z-index: -1;
box-shadow: 0 0 40px #999999;
transition: box-shadow .2s ease-in-out;
}
.card.level-3:hover:before {
box-shadow: 0 0 80px #999999;
}
.table {
border-collapse: collapse;
width: 100%;
}
.table td {
overflow: hidden;
word-break: normal;
text-align: center;
}
.table th {
text-align: center;
word-break: normal;
}
.tablealign {
float: right;
width: 100%;
height: 100%;
border-radius: 3px;
padding-bottom: 50px;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 336px;
display: block;
}
thead {
display: table;
width: calc(100% - 17px);
table-layout: fixed;
}
tbody tr {
table-layout: fixed;
display: table;
width: 100%;
}
div.c {
line-height: 1%;
}
</style>
视图中的其余代码：
<div class="container">
<div class="card level-3">
<h3>Blablabla</h3>
<div class="tablealign">
<div></div>
<table class="table table-sm table-bordered">
<thead class="thead-dark">
<tr>
<th>
<div>Name of The Person</div>
</th>
<th>
<div>Date of The Thing Cre</div>
</th>
<th>
<div>Name of The Universe</div>
</th>
<th>
<div>A Stuff of 4</div>
</th>
<th>
<div>A Stufff Of</div>
</th>
<th>
<div>Hour At Create</div>
</th>
<th>
<div>Hour At Lifeee</div>
</th>
<th><div></div></th>
<th>
<a class="btn btn-sm btn-primary" asp-action="Filtro" asp-route-id="">
SEARCH
</a>
</th>
<th><div></div></th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.Modelito)
{
<tr>
<td>
@item.Nom
</td>
<td>
@item.Fech
</td>
<td>
@item.NombM
</td>
<td>
@item.Momo
</td>
<td>
@item.RA
</td>
<td>
@item.Ho
</td>
<td>
@item.HourF
</td>
<td>
<a class="btn btn-sm btn-primary" asp-action="Edit" asp-route-id="@item.Id">
EDIT
</a>
</td>
<td>
<a class="btn btn-sm btn-primary" asp-action="Details" asp-route-id="@item.Id">
DETAILS
</a>
</td>
<td>
<a class="btn btn-sm btn-danger" asp-action="Delete" asp-route-id="@item.Id">
DELETEthis
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
网站上的所有代码如下所示：
效果很好，不错，但我希望 header 的宽度和列文本更适合，就像你知道的那样……tbody 通常使用 [= 的方式37=] 当它只是一个普通的 table 并且文本在视觉上调整得很好，但是当你要求这个东西有一个不移动头部的滚动时， CSS 代码似乎完全丢失它的想法是出于我压缩之外的原因。
然而，除了改进这个细节之外，我的代码还产生了以下巨大问题，即 View 在手机上看起来像这样...:[=18=]
是的，这看起来很糟糕。
我怎样才能改进我的代码，得到我真正想要的 table，并且让它在手机上看起来不错？在此先感谢您的阅读，我真的需要帮助。
您可以将样式 table-responsive 与 bootstrap 结合使用。
<div class="table-responsive-sm tablealign">
...
然后将table-layout更改为auto，并将mine-width分配给.table th。然后更改 .table 宽度和 srollbar 的宽度 。全部款式都在这里。
<style>
* {
box-sizing: border-box;
}
.wrapper2 {
height: 30vw;
overflow-y: scroll;
}
.card {
background-color: #fff;
border-radius: 10px;
margin: 10% auto;
position: relative;
padding: 34px;
color: #444;
cursor: pointer;
overflow-x: auto;
}
.card:before {
display: block;
position: absolute;
background-color: #ccc;
z-index: -1;
box-shadow: 0 0 40px #999999;
transition: box-shadow .2s ease-in-out;
}
.card.level-3:hover:before {
box-shadow: 0 0 80px #999999;
}
.table {
border-collapse: collapse;
width: 95%;
}
.table td {
overflow: hidden;
word-break: normal;
text-align: center;
}
.table th {
text-align: center;
word-break: normal;
min-width: 100px;
}
.tablealign {
float: right;
width: 100%;
height: 100%;
border-radius: 3px;
padding-bottom: 50px;
}
tbody {
overflow-y: auto;
overflow-x: hidden;
height: 336px;
display: block;
}
tbody::-webkit-scrollbar {
width: 0;
}
thead {
display: table;
width: calc(100% - 17px);
table-layout: auto;
}
tbody tr {
table-layout: fixed;
display: table;
width: 100%;
}
div.c {
line-height: 1%;
}
</style>