英文:
PrimeNG table with virtualScroll not showing border around rows properly
问题
我正在使用带有virtualScroll的PrimeNG表格，如下所示：
<p-table
[value]="filteredData"
scrollHeight="37rem"
[scrollable]="true" #tableEl
[virtualScroll]="virtualScroll"
[virtualScrollItemSize]="53"
selectionMode="single"
[(selection)]="selectedRow"
dataKey="modelId"
sortMode="multiple"
它能正确渲染最初可见的行：
但需要滚动才能到达的行缺少边框：
添加以下代码：
styleClass="p-datatable"
或者选择PrimeNG提供的另一个样式类（p-datatable-scrollable）也不能解决问题。向元素添加自定义样式，例如：
<tr style="height:53px;border-bottom: 5px solid red;">
也无济于事（只有第一个“页面”/“缓冲区”被样式化）。
移除virtualScroll可以解决问题（它们都会带有边框），但速度会变慢，这就是我需要virtualScroll的原因。
英文:
I am using PrimeNG table with virtualScroll like so
<p-table
[value]="filteredData"
scrollHeight="37rem"
[scrollable]="true" #tableEl
[virtualScroll]="virtualScroll"
[virtualScrollItemSize]="53"
selectionMode="single"
[(selection)]="selectedRow"
dataKey="modelId"
sortMode="multiple"
It renders the rows that are originally visible properly :
but the ones below that you need to scroll to get to are missing border around them:
Adding
styleClass="p-datatable"
or selecting another styleClass primeNG provides (p-datatable-scrollable) does not solve the problem. Adding my own style to the elements like for example
<tr style="height:53px;border-bottom: 5px solid red;"
also does not help (only the first "page"/"buffer" is styled).
Removing virtualScroll does solve the problem (they all render with a border), but then it's slow which is why I need virtualScroll.
答案1
得分: 1
I've also encountered this problem and the culprit was Tailwind.
Tailwind sets the table border to collapse by default.
I've fixed this by changing it to "separate"
.p-datatable table { border-collapse: separate; }
英文:
I've also encountered this problem and the culprit was Tailwind.
Tailwind sets the table border to collapse by default.
I've fixed this by changing it to "separate"
> .p-datatable table { border-collapse: separate; }
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论