如何将边框样式应用于坦堆栈可扩展react表中的第一行和最后一行？
如何将边框样式应用于坦堆栈可扩展react表中的第一行和最后一行？
提问于 2022-07-26 16:02:09
在我的项目中，我使用了材料UI和react表的组合。在这里，我要求添加一个可扩展的行，我做到了。在用户展开之后，我们将根据数据列出表行。
下面是那个- https://codesandbox.io/s/tanstack-table-expansion-sub-level-goe-191pip?file=/src/styles.css:0-8的工作演示链接
目前，我被要求将边框顶部和边框底部添加到第一行和最后一行中，我们在展开后显示的行列表中。请参阅所附截图，以更好地理解。假设图像中的红线是边框。扩展后的每一行都有一个className作为depth-1，另一个深层扩展为depth-2。
我可以区分行的背景颜色后，展开。但我只需要运用边境风格。
我试着用nth类型来做这件事。我甚至试过生第一个孩子和最后一个孩子。它不起作用。
请告诉我这是可行的。我的方法正确吗？
按应答的方式工作
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-26 16:47:05
仅使用CSS，就可以应用顶部边框。但对于最底层的边界来说，情况要复杂得多。据我所知，不可能选择类型或类的“最后一个连续元素”。
这是CSS，用于深度为1的tr的顶部边框。
.depth-0 + .depth-1 {
border-top: solid 3px red;
}作为底部边框的替代方案，您可以使用JQuery
$(document).ready(function() {
//$('.depth-0').prev('.depth-1').addClass('borderBottomRed');
});.depth-0 {
box-sizing: border-box;
background-color: yellow;
width: 100%;
padding: 5px;
}
.depth-1 {
box-sizing: border-box;
background-color: green;
width: 100%;
padding: 5px 15px;
}
.borderBottomRed {
border-bottom: solid 3px red;
}
.depth-0 + .depth-1 {
border-top: solid 3px red;
}
.depth-1 + .depth-0 {
border-top: solid 3px red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-0">main</div>
编辑
正如问题的作者所建议的，这可能是css中底部边框的解决方案。
.depth-1 + .depth-0 {
border-top: solid 3px red;
}
.depth-1:last-child {
border-bottom: solid 3px red;
}全码
.depth-0 {
box-sizing: border-box;
background-color: yellow;
width: 100%;
padding: 5px;
}
.depth-1 {
box-sizing: border-box;
background-color: green;
width: 100%;
padding: 5px 15px;
}
.borderBottomRed {
border-bottom: solid 3px red;
}
.depth-0 + .depth-1 {
border-top: solid 3px red;
}
.depth-1 + .depth-0 {
border-top: solid 3px red;
}
.depth-1:last-child {
border-bottom: solid 3px red;
}<div>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73126532
复制相关文章
相似问题
腾讯云开发者
