如何在 <p:dataTable> 中设置 <p:column> 的宽度和边距？素面答案

【问题标题】：How to set width and margin of <p:column> in a <p:dataTable> ? primefaces如何在 <p:dataTable> 中设置 <p:column> 的宽度和边距？素面
【发布时间】：2012-12-06 14:38:00
【问题描述】：

我使用的是 PrimeFaces 3.4.2，我必须使用 <p:dataTable>。我想将第一列的宽度固定为小于 5 px。为此，我创建了一个 CSS 类：

.myTableFlux td:nth-child(1) {
    width: 5px !important;
}

这是我的桌子：

<p:dataTable  value="#{bean.listFlux}" var="list" styleClass="myTableFlux">
    <p:column headerText="Status" >
        <h:graphicImage value="/resources/images/so#{list.i}.jpg" />
    </p:column>
    <p:column headerText="Nom">
        <h:outputText value="#{list.name}" />
    </p:column>
</p:dataTable>

问题是我不能低于 5 像素。

这是我想要的图像

【问题讨论】：

stackoverflow.com/a/7434572/617373
我可以将宽度设置为小于 5px（第一张图片）。我怎样才能删除边距？ @丹尼尔
我猜是margin:0px; 或margin:1px;
您可以简单地使用内联样式覆盖所有样式。您可以通过使用Mozilla中的萤火虫找到样式属性，或检查元素
您最初的问题令人困惑。 5px 与 5% 不同。

标签： java css jsf primefaces

【解决方案1】：

对我来说，p:column 标签上的 width-Attribute 适用于 PrimeFaces 3.4：

<p:column width="3" headerText="longlong">
  <h:outputText value="xyz" />
</p:column>

此代码将显示如下：

编辑：找到了设置某些列的填充样式的解决方案：

<style>
    .ui-datatable td:nth-child(1) div.ui-dt-c {
    padding: 0 0 0 0 !important;
  }
</style>

PrimeFaces 可能有点棘手。您必须追踪属性的来源，并覆盖特定的 styleClasses。

【讨论】：