gpt4 book ai didi

How to scroll only tbody inside flexbox without using height or sticky?(如何在不使用高度或粘性的情况下只滚动Flexbox内的车身?)

转载 作者:bug小助手 更新时间:2023-10-25 23:41:52 25 4
gpt4 key购买 nike



I have table inside nested flex container and I would like to scroll just tbody. I don't want to/can't use hardcoded height or max-height (like for example 500px) because it should shrink or grow as flebox dictates.

我有一个嵌套的弹性容器内的表格,我想只滚动tbody。我不想/不能使用硬编码的高度或最大高度(比如500px),因为它应该按照flebox的要求缩小或增大。


So far I found only the solution using sticky on thead. It works, but as with all sticky approaches scrollbar appears over thead as well.

到目前为止,我只找到了用粘性在头部的解决方案。它是有效的,但与所有粘性方法一样,滚动条也会出现在头上。


So I am looking for a better solution for scrolling tbody -- no sticky and no hardcoded height.

因此,我正在寻找一个更好的解决方案来滚动TBody--没有粘性,也没有硬编码的高度。


My sample code which I use for testing:

我用于测试的样例代码如下:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
{
font-size: 13px;
}
</style>
</head>
<body style="height:100vh;overflow: clip; margin:0;">
<div style="display: flex;height:100%">
<div style="background-color: aqua;">side bar</div>
<div style="flex: 1; display: flex; flex-direction: column">
<header style="flex : 0 0;"><p style="margin:12px">HEADER BAR</p></header>

<main style="flex: 1 1; min-height:0;display: flex; flex-direction: column;">
<button style="font-size: 14px;flex:0 0;">+</button>

<div style="overflow: auto; flex:1;">
<table style="display:contents;">
<thead style="position:sticky;top:0;background-color: white;">
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody style="">
<tr>
<td>1</td>
<td>12-1</td>
</tr>
<tr>
<td>2</td>
<td>332-1</td>
</tr>
<tr>
<td>7</td>
<td>432-1</td>
</tr>
<tr>
<td>2</td>
<td>332-1</td>
</tr>
<tr>
<td>7</td>
<td>432-1</td>
</tr>
<tr>
<td>2</td>
<td>332-1</td>
</tr>
<tr>
<td>7</td>
<td>432-1</td>
</tr>
<tr>
<td>2</td>
<td>332-1</td>
</tr>
<tr>
<td>4</td>
<td>55-1</td>
</tr>
<tr>
<td>end</td>
<td>now</td>
</tr>
</tbody>
</table>
</div>
</main>
<footer style="flex:0 0; ">
<button style="font-size: 14px;">OK</button>
</footer>
</div>
</div>

</body>
</html>




更多回答

If you use table and are looking for only css solution - there is no better solution.

如果你使用TABLE,并且只寻找css解决方案--没有更好的解决方案了。

优秀答案推荐
更多回答

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com