Question

我有以下primefaces datatable：

<p:dataTable id="tabexam"
             paginatorPosition="bottom"
             var="exam"
             value="#{dyna.listexam}"
             widgetVar="examTable"
             emptyMessage="aucun résultat trouvé pour votre recherche"
             paginator="true"
             rows="45" 
             resizableColumns="true"
             draggableColumns="true"
             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
             rowsPerPageTemplate="45,90,135"
             rowStyleClass="#{exam.studyWithRv_1 == 1 ? 'RV' : null}  #{exam.studyUrgence == 1 ? 'Urgent' : null}">

一切都正常显示。需要减少数据表行的默认高度和宽度。我通过覆盖下面的datatable CSS来完成此任务：

.ui-datatable-resizable thead th, .ui-datatable-resizable tbody td, .ui-datatable-resizable tfoot td {

                white-space: nowrap;
                overflow: hidden;
                border-width: 1px;
                border-style: none;
                text-overflow: ellipsis;
                text-align: left;
                padding-bottom: 0.5px!important;
                padding-top :0.5px!important;
                padding-left: 0.5px!important;
                padding-right :0.5px!important;

            }

但在运行此代码后（显示器正是我想要的那样），我发现数据表已经失去了列的可重新定义功能。

任何人都可以告诉我这里缺少什么。

注意：如果我删除左右填充，则可重新调整性恢复正常工作。

padding-left: 0.5px!important;
padding-right :0.5px!important;

Answer 1

当渲染resizeble列时，会在每个元素上插入span元素，如下所示：

<span class="ui-column-resizer ui-draggable" style="position: relative;">&nbsp;</span>

此范围捕获调整大小事件。你可以突出显示它（用于调试pourpose）：

.ui-column-resizer.ui-draggable{
    background-color: red !important;
}

当覆盖 padding-right 时，你的css会导致跨度隐藏在th元素下面（在google chrome上测试最小填充应该是3px）。

您可以强制使用某些css显示span：

.ui-column-resizer.ui-draggable{
    position:relative;
    left:-10px;
    background-color: red !important;
}

您需要在不同的浏览器上进行测试，看看它们是否都具有相同的行为。

如何使用CSS填充设置primefaces数据表列填充

1 个答案: