使用CSS向上移动表格的tbody
使用CSS向上移动表格的tbody
提问于 2018-01-04 02:00:27
我正在尝试创建一个有几十行的表，但我想要做的是一次只显示其中的5行。为此，我的想法是在表的容器上设置一个高度并隐藏溢出，然后使用top或translateY或其他一些方法来向上或向下移动tbody中的行。不幸的是，我似乎不能让它很好地工作。
这是我目前使用transform的尝试，这似乎会导致表格边框出现问题，并且tbody单元格会超出thead单元格的顶部。我还尝试了一些使用负top值的方法，但也无法让它以这种方式工作：
$(function() {
$('button').click(function() {
$('table tbody').toggleClass('shifted');
});
});.container {
height:175px;
overflow:hidden;
}
table {
border-collapse:collapse;
}
thead td {
background:white;
}
tbody.shifted {
transform:translateY(-145px);
}
td {
border:1px solid black;
padding:5px;
}
button {
margin-top:20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table>
<thead>
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem 1</td>
<td>Ipsum 1</td>
</tr>
<tr>
<td>Lorem 2</td>
<td>Ipsum 2</td>
</tr>
<tr>
<td>Lorem 3</td>
<td>Ipsum 3</td>
</tr>
<tr>
<td>Lorem 4</td>
<td>Ipsum 4</td>
</tr>
<tr>
<td>Lorem 5</td>
<td>Ipsum 5</td>
</tr>
<tr>
<td>Lorem 6</td>
<td>Ipsum 6</td>
</tr>
<tr>
<td>Lorem 7</td>
<td>Ipsum 7</td>
</tr>
<tr>
<td>Lorem 8</td>
<td>Ipsum 8</td>
</tr>
<tr>
<td>Lorem 9</td>
<td>Ipsum 9</td>
</tr>
<tr>
<td>Lorem 10</td>
<td>Ipsum 10</td>
</tr>
</tbody>
</table>
</div>
<button>Shift table rows</button>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-04 02:08:49
您可以只使用:nth-child()隐藏选择行，而不是转换表。
$(function() {
$('button').click(function() {
$('table tbody').toggleClass('shifted');
});
});.container {
overflow: hidden;
}
table {
border-collapse: collapse;
}
thead td {
background: white;
}
tbody tr:nth-child(n+6) {/* 6th row and later */
display: none;
}
tbody.shifted tr:nth-child(n) {/* override the non-shifted styles */
display: table-row;
}
tbody.shifted tr:nth-child(-n+5) {/* 5th row and earlier */
display: none;
}
td {
border: 1px solid black;
padding: 5px;
}
button {
margin-top: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table>
<thead>
<tr><td>Heading 1</td><td>Heading 2</td></tr>
</thead>
<tbody>
<tr><td>Lorem 1</td><td>Ipsum 1</td></tr>
<tr><td>Lorem 2</td><td>Ipsum 2</td></tr>
<tr><td>Lorem 3</td><td>Ipsum 3</td></tr>
<tr><td>Lorem 4</td><td>Ipsum 4</td></tr>
<tr><td>Lorem 5</td><td>Ipsum 5</td></tr>
<tr><td>Lorem 6</td><td>Ipsum 6</td></tr>
<tr><td>Lorem 7</td><td>Ipsum 7</td></tr>
<tr><td>Lorem 8</td><td>Ipsum 8</td></tr>
<tr><td>Lorem 9</td><td>Ipsum 9</td></tr>
<tr><td>Lorem 10</td><td>Ipsum 10</td></tr>
</tbody>
</table>
</div>
<button>Shift table rows</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48082756
复制相关文章
相似问题
腾讯云开发者
