如何使表格水平滚动并固定第一列和最后一列 [英] How to make table scroll horizontally with fixed first and last columns
本文介绍了如何使表格水平滚动并固定第一列和最后一列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在下面有想要滚动的表格 水平，但是我想要表的第一列和最后一列 固定，而中间的列可滚动时.关于如何的任何想法 要做到这一点?我想要没有任何插件或 javascript. html之后，我的css进一步下降.谢谢.
I have this table below that I would like to have scrollable horizontally, but I want both the first and last column of the table to be fixed while columns in between are scrollable. Any ideas on how to accomplish this? I want to do this without any plugins or javascript. My css further down after the html. Thank you.
<div class="gameinfo-score__details">
<div class="gameinfo-score__details_div">
<div class="gameinfo-score__details__table-div">
<table class="gameinfo-score__details__table-div__table">
<tr class="gameinfo-score__details__table-div__table__row">
<th class="gameinfo-score__details__table-div__table__row__head headcol">
</th>
<td class="gameinfo-score__details__table-div__table__row__head"
ng-repeat="scoreHeading in scoreColumns">
{{scoreHeading}}
</td>
<td class="gameinfo-score__details__table-div__table__row__head">
-
</td>
<td class="gameinfo-score__details__table-div__table__row__head headcol2">
-
</td>
</tr>
<tr class="gameinfo-score__details__table-div__table__row">
<th class="gameinfo-score__details__table-div__table__row__data headcol">
<img class="profile-pic" alt="Profile Picture" height="50" width="100">
</th>
<td class="gameinfo-score__details__table-div__table__row__data"
ng-repeat="scoreHeading in scoreColumns">
-
</td>
<td class="gameinfo-score__details__table-div__table__row__data">-</td>
<td class="gameinfo-score__details__table-div__table__row__data headcol2">-</td>
</tr>
<tr class="gameinfo-score__details__table-div__table__row">
<th class="gameinfo-score__details__table-div__table__row__data headcol">
<img class="profile-pic" alt="Profile Picture" height="50" width="100">
</th>
<td class="gameinfo-score__details__table-div__table__row__data"
ng-repeat="scoreHeading in scoreColumns">
-
</td>
<td class="gameinfo-score__details__table-div__table__row__data">-</td>
<td class="gameinfo-score__details__table-div__table__row__data headcol2">-</td>
</tr>
</table>
</div>
</div>
</div>
.gameinfo-score__details{
margin-bottom: 5px;
.gameinfo-score__details_div {
background-color: #999999;
color: #ffffff;
position: relative;
.score__summary-name {
@include flex-grow(1);
margin-top: 5px;
margin-bottom: 5px;
margin-left: 15px;
}
.gameinfo-score__details__table-div {
background-color: #999999;
width: 100%;
overflow-x: scroll;
margin-left: 100px;
overflow-y: visible;
padding: 0;
table {
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}
.headcol {
position: absolute;
left: 0;
}
.headcol2 {
position: absolute;
right: 0;
}
.gameinfo-score__details__table-div__table {
.gameinfo-score__details__table-div__table__row {
border-top: solid 1px #737373;
.gameinfo-score__details__table-div__table__row__head {
height: 24px;
width: 121px;
color: $gray-lighter;
font-size: $font-size-small;
text-align: center;
background-color: #3a3a3a;
&:last-child {
width: 44px;
}
}
.gameinfo-score__details__table-div__table__row__data {
height: 54px;
width: 44px;
background-color: white;
color: black;
font-size: $font-size-xsmall;
text-align: center;
text-transform: initial;
border-right: solid 1px #737373;
border-bottom: solid 1px #737373;
&:first-child {
width: 121px;
}
}
}
}
}
}
}
推荐答案
这个问题曾经被问过，但这是固定列的滚动表的代码:
This question has been asked before, but here is the code for a scrolling table with fixed columns:
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td, th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol2 {
position: absolute;
width: 5em;
right: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
background-color: white;
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}
<div>
<table>
<tr><th class="headcol">1</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="headcol2">END</td></tr>
<tr><th class="headcol">2</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="headcol2">END</td></tr>
<tr><th class="headcol">3</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="headcol2">END</td></tr>
<tr><th class="headcol">4</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="headcol2">END</td></tr>
<tr><th class="headcol">5</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="headcol2">END</td></tr>
<tr><th class="headcol">6</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="headcol2">END</td>
</tr>
</table>
</div>
希望有帮助.
这篇关于如何使表格水平滚动并固定第一列和最后一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
