Question

这是我的acefaces datatable

<ace:dataTable id="tbl" value="#{mainSearch.searchResult}" var="srvc" 
            paginator="true" paginatorPosition="bottom" rows="10" 
            emptyMessage="No Record Present Yet" rowsPerPageTemplate="10,25,50,100" 
            rowIndexVar="row" rowStyleClass="#{row mod 2 eq 0?'none':'skyBlue'}">

    <ace:column headerText="Category" sortBy="#{srvc.groupName}" 
            filterBy="#{srvc.groupName}" filterMatchMode="contains">
        <h:outputText value="#{srvc.groupName}"/>
    </ace:column>

    <ace:column  headerText="Service Number" sortBy="#{srvc.serviceNumber}" 
            filterBy="#{srvc.serviceNumber}"filterMatchMode="contains">                            
        <h:outputText value="#{srvc.serviceNumber}"/>                       
    </ace:column>

    <ace:column headerText="Shift" sortBy="#{srvc.shift}" 
            filterBy="#{srvc.shift}" filterMatchMode="contains">
        <h:outputText value="#{srvc.shift}"/>
    </ace:column>
</ace:dataTable>

现在这个数据表显示在我的整个页面上。我可以通过<ace:datatable height=..来修复它的高度，但我没有找到任何宽度属性。我还尝试使用CSS设置其宽度（使用样式属性）在标题，数据表上但它没有用。现在我被困在这里，无法找到我如何最小化其宽度。

注意：对我有用的唯一方法是缩小标题文本。例如，因为我的第一行标题是类别。现在如果我只用 CAT 然后整行收缩。这意味着首先我需要挤压文本（因为这是我的猜测）。无论如何，那里没有戳这个文本？如果没有，那么我该如何调整此文本的大小并缩短此数据？

Answer 1

我尝试在ICEfaces showcase的Firefox中更改CSS width属性，从而达到您想要的效果。请注意，当您使表格太小并且数据不再适合表格时可能存在一些潜在的问题，因此我的建议是在浏览器中检查结果表以获得正确的CSS夹具。

关于<ace:dataTable>的文档，有分别设置CSS样式类和内联样式的典型styleClass和style属性，因此以下内容将完成工作：

<ace:dataTable style="width:80%"> ... </ace:dataTable>

或

<ace:dataTable styleClass="my-width"> ... </ace:dataTable>

使用CSS类：

.my-width {
    width:80%
}

作为旁注，当您准备试用最新的Primefaces <p:dataTable>时，您会发现many attributes专为设置正确的CSS样式而设计。

如何在acefaces数据表上应用css并最小化其宽度

1 个答案: