скрыть заголовок столбца таблицы простых лиц

У меня есть p:treeTable, и все содержимое дерева находится в одном столбце. Дерево является общим компонентом, поэтому для некоторых моих страниц требуется заголовок столбца, а для некоторых нет. На страницах, где columnHeader пуст, он создает пустую строку для заголовка столбца, чего я не хочу. Мне нужно содержимое столбца, а не заголовок, когда заголовка столбца нет.

Как я могу это исправить? Любые указатели/идеи были бы замечательными. Спасибо!


hide primefaces treetable columnheader
person santa029    schedule 09.10.2012    source источник

Ответы (6)


arrow_upward
15
arrow_downward

Вы можете решить эту проблему с помощью пользовательского CSS, установив для атрибута отображения объявления значение none:

Пример:

div[id="testForm:first"] thead {
    display:none;
}

если ваш JSF похож на это:

<h:form id="testForm">
    <p:dataTable id="first">
        ...
    <p:/dataTable>
</h:form>
person Akos K    schedule 10.10.2012
comment
спасибо за ответ, display:none не работал у меня, немного подправил, чтобы получить предполагаемую строку .hide-column-header table thead tr[role='row'] {display: none;} - person santa029; 11.10.2012

arrow_upward
8
arrow_downward

Если ваш <p:dataTable> использует такую ​​ширину столбцов

<p:dataTable styleClass="myTable">
   <p:column width="100">

и вы используете следующий CSS, чтобы скрыть заголовки столбцов

.myTable thead {
    display:none;
}

вы также потеряете ширину столбцов, которую вы установили

Решение для скрытия заголовка столбца и сохранения ширины столбца

.myTable thead th { 
    border: none !important; 
    background: none !important; 
}
person Mark    schedule 05.02.2016

arrow_upward
5
arrow_downward

Более формальное решение:

ЯРЛЫК:

<p:treeTable styleClass="tree-table-no-header">

Стиль:

.tree-table-no-header thead {
    display: none;
}
person ClipEscola Ciaporte    schedule 25.06.2015

arrow_upward
1
arrow_downward

Вы можете обнаружить, что вам нужно быть более конкретным с вашим селектором стиля:

 div[id$="myTableId"]>div>table>thead { display:none; }

Это также устраняет необходимость ссылаться на идентификатор формы. «$» начинается с подстановочного знака, а «>» говорит о выборе только прямых дочерних элементов. См. http://www.w3schools.com/cssref/css_selectors.asp, чтобы хороший справочник по селектору CSS.

person Heather92065    schedule 22.09.2014

arrow_upward
1
arrow_downward

Скрыть заголовок (так же, как и другие ответы):

.hide-table-header thead {
    display: none;
}

... и указать ширину столбца:

<p:dataTable styleClass="hide-table-header">
        <p:column style="width: 80px">

Они не будут работать с таблицами reflow="true".

Для меня предложение border:none, background:none оставляет пустое пространство над таблицей и также скрывает левую боковую границу таблицы.

person Gabor Nagy    schedule 05.11.2016

arrow_upward
0
arrow_downward

Добавьте этот код в свой файл css3

** Remove the header from the dataTable**/
.ui-datatable.borderless thead {
  display: none;
}

/** Remove the border from the dataTable **/
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
    }

Затем вызовите этот код из файла xhtml следующим образом:

<p:dataTable styleClass="borderless">
person Omar    schedule 13.04.2017