我正在尝试为表格主体添加滚动但我无法让标题与列对齐。
我还想将滚动条放在表格内而不覆盖单元格中的任何文本。
期待看到一些天才在起作用。我正撞在墙上。
以下是代码:JSBin
CSS
tr {
width: 100%;
height:20px;
//table-layout: fixed;
}
table {
height: 220px;
white-space: nowrap;
border-collapse: collapse;
}
tbody {
overflow-y: scroll;
height: 200px;
width: 100%;
position: absolute;
}
th, td {
border: solid 1px #ccc;
padding: 2px;
}
答案 0 :(得分:0)
表格不滚动。你必须将它们放在一个div中。
由于位置:柱体上的绝对值,列没有排列 - 我认为这是将tbody更改为常规块级div,其中包含一个最终包含在表格单元格中的表格。
从你的css中删除了一堆其他的东西,比如宽度:tr上的100%。 tr总是宽度:100%。
不确定.fluid的宽度:50%会产生什么影响。在比桌子宽的窗户上进行测试,然后比你的桌子更窄,以便找到它。
table {
white-space: nowrap;
border-collapse: collapse;
}
th, td {
border: solid 1px #ccc;
padding: 2px;
}
.fixed {
min-width: 300px
}
.fluid {
width: 50%;
}
#scrollbar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#scrollbar::-webkit-scrollbar {
width: 8px;
background-color: #F5F5F5;
}
#scrollbar::-webkit-scrollbar-thumb {
border-radius: 20px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #D62929;
}

<div style="height: 200px; overflow-y:scroll" id=scrollbar>
<table>
<thead>
<tr>
<th class="fluid">First Column</th>
<th class="fixed">Fixed Column</th>
<th class="fluid">Third Column</th>
</tr>
</thead>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
</table>
</div>
&#13;
答案 1 :(得分:0)
我已将滚动条放在表格中并将标题黑客div固定在透明标题上。
只有1个错误,如果调整大小太小,标题文本会从表的末尾开始。否则看起来不错。
我认为这样的事情不会那么困难。
JS Bin或在下方运行代码段。
html, body{
padding:20;
font-family: "Arial", Helvetica, sans-serif;
}
section {
position: relative;
border: 1px solid #b3d5d6; /*outer border*/
padding-top: 25px; /*header height*/
background: #b3d5d6; /*header color*/
}
.container {
overflow-y: auto;
overflow-x: hidden;
height: 250px; /*table height*/
}
table {
cursor: pointer;
white-space: nowrap;
border-collapse: collapse;
}
td + td {
border-left:1px solid #eee; /*cell column seperator*/
}
td, th {
font-size: 13px;
border-bottom:1px solid #eee; /*cell row seperator*/
color: #000; /*text color*/
padding: 2px 10px; /*cell padding*/
}
tr:nth-child(odd) { /*alternate cell colors*/
background: #FFFFFF; }
tr:nth-child(even) {
background: #F6FAFA; }
th { /*hidden header*/
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #000; /*header color*/
padding: 5px 10px; /*header alignment*/
top: 0;
margin-left: -10px;
line-height: normal;
border-left: 1px solid #fff; /*header column seperator*/
}
th:first-child div{
border: none;
}
tr:hover td {
background: linear-gradient(#91bbbc, #d6e6e6 5%, #d6e6e6 95%, #91bbbc);
}
.fixed {
min-width: 200px;
}
.fluid {
width: 50%;
}
#scrollbar::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#scrollbar::-webkit-scrollbar
{
width: 8px;
background-color: #F5F5F5;
}
#scrollbar::-webkit-scrollbar-thumb
{
border-radius: 20px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #7997a1;
}
<section class="">
<div class="container" id="scrollbar">
<table>
<thead>
<tr class="header">
<th class="fluid">
First Column
<div>First Column</div>
</th>
<th class="fixed">
Fixed Column
<div>Fixed Column</div>
</th>
<th class="fluid">
Third Column
<div>Third Column</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr> <tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
<tr>
<td>ads</td>
<td>ads</td>
<td>332113232</td>
</tr>
</tbody>
</table>
</div>
</section>