Как установить для правил значение none в p: panelGrid?

#css #jsf #primefaces #jsf-2.2

#css #jsf #primefaces #jsf-2.2

Вопрос:

В отличие <h:panelGrid> от , <p:panelGrid> не имеет опции like rules . По умолчанию все правила отображаются между ячейками <p:panelGrid> . Например,

 <p:panelGrid style="table-layout: fixed; width: 100%; word-wrap: break-word;">
    <f:facet name="header">
        <p:row>
            <p:column colspan="3">
                <h:outputText value="Header"/>
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column>1</p:column>
        <p:column>2</p:column>
        <p:column>3</p:column>
    </p:row>

    <p:row>
        <p:column>1</p:column>
        <p:column>2</p:column>
        <p:column>3</p:column>
    </p:row>

</p:panelGrid>
  

будет отображаться макет сетки следующим образом.

Макет сетки

Как удалить эти строки (горизонтальные и вертикальные) между ячейками, что-то вроде таблицы HTML <table rules="none"> ?

Ответ №1:

Вы можете использовать следующий CSS

 .ui-panelgrid tr,.ui-panelgrid .ui-panelgrid-cell {
   border: none;       
}
  

Комментарии:

1. Возможно ли применить эти классы CSS только к определенным <p:dataGrid> s на странице? Применяется ко всем <p:panelGrid> s на странице.

2. Просто дайте вашему panelGrid класс стилей, скажем, myPanelGridStyle, затем добавьте его в .ui-panelgrid … В этом случае это было бы . myPanelGridStyle.ui-panelgrid … Для обоих селекторов css