Primefaces列垂直文本

Question

我有22列數據表，但我將他們的風格8個垂直 我用這dataTable的

<p:dataTable var="car" value="" paginator="true" rows="5" style=".ui-datatable th { writing-mode: tb-lr; }" 
       paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" 
       rowsPerPageTemplate="5,10,15" id="carTable" lazy="true"> 
     <p:ajax event="rowSelect" update=":form" oncomplete="PF('carDialog').show()" /> 
     <p:column headerText="column1" sortBy="" filterBy=""> 
      <h:outputText value="" /> 
     </p:column> 
<p:column headerText="column2" sortBy="" filterBy=""> 
      <h:outputText value="" /> 
     </p:column> 
...... 
<p:column headerText="column22" sortBy="" filterBy=""> 
      <h:outputText value="" /> 
     </p:column> 

圖片：

哪能做這個？

Answer 1

新增CSS writing-mode : vertical-lr（或者，如果你想嘗試垂直-RL）到你的專欄近期瀏覽器

您可能希望這個老瀏覽器

-ms-writing-mode: tb-rl; /* old IE 6 and 7 */ 
-webkit-writing-mode: vertical-rl; 
-ms-writing-mode: vertical-rl; 

檢查this兼容性

您可能需要使用styleClass="verticalText"並將其放入您的CSS文件中

.verticalText{ 
writing-mode : vertical-lr; 
    -ms-writing-mode: tb-rl; /* old IE 6 and 7 */ 
    -webkit-writing-mode: vertical-rl; 
    -ms-writing-mode: vertical-rl; 
} 

而且隨着<f:facet name="header">代替HEADERTEXT

<p:column> 
    <f:facet name="header"> 
    <h:outputText value="Title"/> 
    </f:facet> 
</p:column> 

另一種解決方案，使用圖像替換的outputText通過<h:graphicImage name="verticalheader.png" />看到this answer