如何設置primefaces數據表中列有CSS填充

填充我有以下primefacesdatatable：正確顯示如何設置primefaces數據表中列有CSS填充

<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}">

一切。需要減少數據錶行的默認高度和寬度。我已經通過重寫下面datatableCSS做到了這一點：

.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; 

      }

但運行此代碼後（顯示只是正是我想這是）我發現該數據表已經失去了列的可調整大小的功能。

任何人都可以告訴我我在這裏錯過了什麼。

注意：如果我刪除左側和右側的填充，resizability回來工作。

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

來源

2014-01-07 Jalal Sordo

刪除'！important'。 – DaniP

已經嘗試過，仍然是同樣的事情。 –

當resizeble列被渲染，一個跨度元件被插入每個元件上，如下所示：

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

這跨度捕獲的調整大小的事件。您可以突出顯示它（用於調試運行pourpose）是這樣的：

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

你的CSS是導致跨度th元素下重寫填充右（對谷歌測試時，Chrome瀏覽器最小填充應該被隱藏3px的）。

你可能會迫使跨度要顯示與一些CSS：

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

您將需要測試不同的瀏覽器，看看它們都具有相同的行爲。

來源

2014-01-08 11:55:32

如何設置primefaces數據表中列有CSS填充

回答

相關問題