2012-10-09 27 views
8

Tengo un p: treeTable y los contenidos del árbol están todos en una columna. El árbol es un componente compartido, por lo que algunas de mis páginas requieren un encabezado de columna y otras no. En las páginas donde columnHeader está vacío, crea una fila vacía para el encabezado de la columna, que no quiero. Quiero el contenido de la columna, pero no el encabezado cuando no hay un encabezado de columna.ocultar encabezado de la columna de la tabla de las primicias

¿Cómo puedo solucionar esto? Cualquier puntero/ideas sería genial. ¡Gracias!

Respuesta

13

Puede resuelto que con CSS personalizado estableciendo el atributo de visualización de la culata en T incomparables:

Ejemplo:

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

si su JSF es similar a esto:

<h:form id="testForm"> 
    <p:dataTable id="first"> 
     ... 
    <p:/dataTable> 
</h:form> 
+0

gracias por responder, el display: none trabajó para mí, ajustado poco para obtener la fila deseada .hide-column-header table thead tr [role = 'row'] {display: none;} – santa029

1

Usted puede encuentra que necesitas ser más específico con tu selector de estilo:

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

Esto también elimina la necesidad de hacer referencia a su id de formulario. El '$' es un comienzo con comodín y el '>' dice seleccionar solo niños directos. Consulte http://www.w3schools.com/cssref/css_selectors.asp para obtener una referencia CSS Selector realmente buena.

2

Una solución más formal:

TAG:

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

Estilo:

.tree-table-no-header thead { 
    display: none; 
} 
4

Si su <p:dataTable> utiliza los anchos de columna como esta

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

y U SE La siguiente CSS para ocultar los encabezados de columna

.myTable thead { 
    display:none; 
} 

también perderá los anchos de columna que ha establecido


Solución para ocultar cabecera de la columna y mantener el ancho de las columnas

.myTable thead th { 
    border: none !important; 
    background: none !important; 
} 
1

ocultar la cabecera (igual que otras respuestas):

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

... y especificar el ancho de la columna:

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

Estos no funcionarán con reflujo = tablas "verdaderos".

Para mí el borde: ninguno, fondo: ninguna sugerencia deja un espacio vacío encima de la mesa y también oculta el borde izquierdo de la tabla.

0

Añadir este código a su archivo CSS 3

** 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; 
    } 

luego llamar a este código del archivo XHTML de esta manera:

<p:dataTable styleClass="borderless"> 
Cuestiones relacionadas