Primefaces数据表标题对齐

Question

我有关于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

做一招，

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 2

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

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

同

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

MDN-calc() description

Answer 3

对于有这个问题的任何人 - Primefaces scrollable继续存在问题。我在5.1，它不工作。

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

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

当然不要使用table，thead，tr等作为目标元素。而是使用css类，以便获得正确的数据表。

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

更多关于css3的flexbox：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

这个问题在primefaces最新版本（7.0）中得到解决

https://github.com/primefaces/primefaces

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');
        });