Primefaces列垂直文本

Question

我有一个包含22列的dataTable，但我会将其中的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（或者想要尝试的vertical-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>

另一种解决方案，使用图片将<h:graphicImage name="verticalheader.png" />替换为outputText，请参阅this answer