Primefaces列の垂直テキスト

Question

私は22列とのdataTableを持っているが、私は、私はこの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> 

画像 それらのスタイル8垂直使用しています：

どのように私ができるのこれ作って？

Answer 1

（あなたが試してみたい場合や垂直-RL）あなたは、互換性

のために、この古いブラウザ用

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

チェックthisをすることが、最近のブラウザのためにあなたのコラムに

をCSS writing-mode : vertical-lrを追加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; 
} 

、代わりにheaderText

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

の<f:facet name="header">別の解決策で行く、使用画像は<h:graphicImage name="verticalheader.png" />でのoutputTextを置き換えるこのしかし働いていないされて作っていますthis answer