如何在p：datatable中的两个特定列之间留出空格

Question

我想在p：datatable的多列之间留出一些空间。如何在不添加任何额外空白列的情况下实现它

Answer 1

一个猜测，我还没有尝试过它

.ui-datatable.padding-third-col tbody tr td:nth-child(3) {
    padding-right: 5px;
}

提供数据表styleClass="padding-third-col"。

编辑：抱歉，对我来说也是如此。我想这取决于你的主题/造型。

我会像

那样添加一个额外的列

<p:column styleClass="hidden" style="width: 20px"></p:column>

与

.hidden {
    background-color: white;
}

对我来说，它不足以在行的背景显示中给它visibility: hidden。另外，我需要用

之类的东西重置所有边框

table[role=grid], tr, td, th {
    border: none !important;
    border-collapse: separate;
}

如果您愿意，可以使用表格的styleClass作为前缀。

Answer 2

试试这个Css

.ui-datatable tbody td {
    border-color: inherit;
    width: 48px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

Answer 3

假设你的p：datatable元素在

中

<div class="container"> <p:datatable class="data">... </div>

您可以通过以下方式更改特定p：datatable的样式：

.container .data:nth-child(n+1){
  color:red;
}