Question

我需要一个没有边框和列标题的数据表。但我似乎无法摆脱列标题。以下是我的代码。

CSS

.ui-datatable.borderless .ui-datatable-data tr,
.ui-datatable.borderless .ui-datatable-data-empty tr,
.ui-datatable.borderless .ui-datatable-data td,
.ui-datatable.borderless .ui-datatable-data-empty td
.ui-datatable.borderless .ui-datatable-data th {
    border-style: none;
    padding: 0;
}

XHTML

<p:dataTable border="0" cellpadding="0" cellspacing="0"
    styleClass="borderless" id="datatable_attributes"
    value="#{pc_Cr1002.w_currency.att_list}" var="varatt_list">
</p:datatable>

HTML

<div id="datatable_attributes" class="ui-datatable ui-widget borderless">
        <div class="ui-datatable-tablewrapper"><table role="grid">
        <thead id="datatable_attributes_head"><tr role="row">
        <th id="datatable_attributes:att_col1" class="ui-state-default" role="columnheader"><span></span></th><th id="datatable_attributes:att_col2" class="ui-state-default" role="columnheader"><span></span></th><th id="datatable_attributes:att_col4" class="ui-state-default" role="columnheader" style="width:20px"><span></span></th><th id="datatable_attributes:att_col3" class="ui-state-default" role="columnheader"><span></span></th></tr></thead><tfoot></tfoot><tbody id="datatable_attributes_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row">

Answer 1

也许尝试在你的css类声明中添加空格，如下所示： .ui-datatable .borderless 因为你的代码只有.borderless类没有的.ui-datatable.borderless

Answer 2

您可以通过覆盖css来解决此问题，例如：删除列标题（也删除边框）

<style type="text/css">
                #full_path\:datatable_attributes thead{
                    display:none !important;  
                }
            </style>

<p：datatable>没有边框和列标题</p：datatable>

2 个答案: