如何从 Primefaces DataTable 页脚中删除填充

问题描述

我有一个简化的数据表，如下所示：

<p:dataTable id="myDataTable" styleClass="table">
    <f:facet name="header">
        <p:columnGroup>
            <p:column colspan="5">
                <h:outputText value=""/>    
            </p:column>
        </p:columnGroup>
    </f:facet>
    <p:column>
        <f:facet name="header"><h:outputText value="" /></f:facet>
        <h:outputText value="" />
    </p:column>
    <p:column>
        <f:facet name="header"><h:outputText value="" /></f:facet>
        <h:outputText value="" />
    </p:column>
    <p:column>
        <f:facet name="header"><h:outputText value="" /></f:facet>
        <h:outputText value="" />
    </p:column>
    <p:column >
        <f:facet name="header"><h:outputText value=""/></f:facet>
        <h:inputTextarea id="ita" styleClass="inputTextArea" value="" valuechangelistener=""></h:inputTextarea>
    </p:column>
    <p:column >
        <f:facet name="header"><h:outputText value=""/></f:facet>
        <h:outputText value="" />
    </p:column>
    <f:facet name="footer">
        <table id="fTable">
            <tr>
                <td class="fTable">
                    <h:inputText id="iText" value="varText" styleClass="inputvarText"/>
                    <p:commandButton id="btnSearch" icon="fa fa-search" update="name" actionListener=""/>
                </td>
                <td class="fTable">
                    <h:outputText id="name" value=""/>
                </td>                   
                <td class="fTable">
                    <p:commandButton id="btnAdd" update="myDataTable" actionListener="" />
                </td>
            </tr>
        </table>
    </f:facet>
</p:dataTable>

而且我在设置页脚样式时遇到了一些麻烦（来自styles.css）。 我需要从 fTable 和围绕它的填充中删除所有边框。我用以下方法管理边界：

.fTable{
    border-style: none !important;
}

但是我想在没有 !important 的情况下做到这一点

我无法摆脱的填充。我试过这样的事情：

.myDataTable.ui-datatable-footer
.myDataTable.ui-widget-header
.myDataTable.ui-corner-bottom{
    padding: 0;
} 

（都带有类 '.' 和 id '#'） 我不知道语法以及如何仅删除特定的填充并且不让 Primefaces 覆盖我的样式。

在浏览器中显示为：

<div class="ui-datatable-footer ui-widget-header ui-corner-bottom">
    <table id="fTable">
        <tbody><tr>
            <td class="fTable>

如果我将第一行更改为：

<div class="ui-datatable-footer ui-widget-header ui-corner-bottom" style="padding:0">

它像我想要的那样删除填充。 如何在我的styles.css 中指定？

任何帮助将不胜感激，抱歉长篇幅。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）