Primefaces 数据表头对齐

Question

我对 primefaces 数据表有疑问。如您所见，列边框和标题存在对齐问题。这是一个 primefaces 错误还是我的数据表有问题？顺便说一句，数据表有动态列。

<p:dataTable     scrollable="true" scrollWidth="100%" editable="true" editMode="cell"   
var="invoiceLine" value="#{myController.invoiceLines}"                          
                         selection="#{myController.selectedInvoiceLine}" selectionMode="single" rowKey="#{invoiceLine.uuid}"
                         >
<p:columns value="#{myController.columns}" var="column"
                           styleClass="ui-editable-column" width="50"
                           columnIndexVar="colIndex">

//some stuff
</p:columns>         

            </p:dataTable>

Answer 1

此问题已在 primefaces 最新版本 (7.0) 中解决

https://github.com/primefaces/primefaces

Answer 2

这个问题在 6.2 中仍然存在。 在样式属性中设置宽度的另一种解决方案是替换

<p:column style="width:100px">

与

<p:column style="width:calc(100px)">

MDN-calc() description

Answer 3

对于遇到此问题的其他人 - Primfaces 可滚动仍然存在问题。我在 5.1 上，但它不工作。

只需使用普通的数据表，然后使用 CSS3 来让滚动工作：

https://jsfiddle.net/xuvsncr2/170/

当然不要使用 table、thead、tr 等来定位元素。而是使用 css 类，以便获得正确的数据表。

棘手的部分是，为了设置滚动窗格的大小，您需要定位直接围绕表格的 div。你可以在下面看到我是如何做到的

更多关于 flexbox 的 css3：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是我用于 primefaces 的 css 示例。我刚刚用<div class="myCompanyScrollable thirtyEM"> 包装了我的数据表

.thirtyEM .ui-datatable-tablewrapper{
height: 30em;
}
.myCompanyScrollable table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
.myCompanyScrollable table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 1.05em);
    display: table;
    table-layout: fixed;
}
.myCompanyScrollable table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
.myCompanyScrollable table tbody tr {
    width: 100%;
}
.myCompanyScrollable table tbody tr {
    display: table;
     width: 100%;
    table-layout: fixed;
}
/* decorations */
.myCompanyScrollable {
    border: 1px solid black;
    padding: 0.3em;
}
.myCompanyScrollable table {
    border: 1px solid lightgrey;
}
.myCompanyScrollable table td, .myCompanyScrollable table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
.myCompanyScrollable table th {
    border: 1px solid grey;
}

Answer 4

做一招，

Remove scrollable = true

并创建新的样式类，例如，

.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper{
     overflow: auto;
     width: 100%;
     padding-bottom: 5px;}

将styleClass 应用到p:datatable 喜欢styleClass="ui-datatable-hor-scroll"

Answer 5

试试下面的jquery代码

$('.datatableclassname').find(('div.ui-datatable-scrollable-header ')+'div.ui-dt-c').each(function(index) {
            var cur_obj = $(this);
            var column_num = parseInt(index+1);
            $('.datatableclassname div.ui-datatable-scrollable-body tr > td:nth-child('+column_num+') > div.ui-dt-c').css('width',cur_obj.width()+'px');
        });