특정 PrimeFaces p : panelGrid에서 테두리를 제거하는 방법은 무엇입니까?

특정 PrimeFaces p : panelGrid에서 테두리를 제거하는 방법은 무엇입니까?

---

특정 PrimeFaces에서 테두리를 제거하는 데 어려움이 있습니다 <p:panelGrid>.

<p:panelGrid styleClass="companyHeaderGrid">
    <p:row>
        <p:column>
            Some tags
        </p:column>
        <p:column>
            Some tags
        </p:column>
    </p:row>
</p:panelGrid>

다음을 사용하여 셀에서 테두리를 제거 할 수있었습니다.

.companyHeaderGrid td {
    border: none;
}

그러나

.companyHeaderGrid {
    border: none;
}

작동하지 않습니다.

---

테두리가 생성 된 요소 tr와 . 따라서 다음을 수행해야합니다.tdtable

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

어떻게 찾았습니까? Chrome의 웹 개발자 도구 세트에서 생성 된 HTML 출력 및 모든 CSS 스타일 규칙을 확인하기 만하면됩니다 (오른쪽 클릭, 요소 검사 또는 F12 누르기). Firebug와 IE9에는 유사한 도구 세트가 있습니다. 혼란에 관해서는 JSF / Facelets는 궁극적으로 HTML을 생성하고 CSS는 JSF 소스 코드가 아닌 HTML 마크 업에만 적용된다는 점을 명심하십시오. 따라서 CSS를 적용 / 미세 조정하려면 대신 클라이언트 (웹 브라우저) 쪽을 살펴 봐야합니다.

또한보십시오:

• 기본 PrimeFaces CSS를 사용자 지정 스타일로 재정의하려면 어떻게해야합니까?
• 모든 PrimeFaces p : panelGrid 구성 요소에서 테두리 제거

---

PrimeFaces 4 또는 이전 버전을 사용중인 경우 대신 아래를 사용하세요.

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
    border: none;
}

---

저는 Primefaces 6.0을 사용하고 있으며 패널 그리드에서 테두리를 제거하기 위해 다음과 같이이 스타일 클래스 "ui-noborder"를 사용합니다.

<p:panelGrid columns="3" styleClass="ui-noborder">
   <!--panel grid contents -->
</p:panelGrid>

프라임 페이스 lib에서 "components"라는 css 파일을 사용합니다.

---

이것은 나를 위해 일했습니다.

.ui-panelgrid td, .ui-panelgrid tr
{
    border-style : 없음! 중요
}

---

BalusC 답변이 작동하지 않으면 다음을 시도하십시오.

.companyHeaderGrid td {
     border-style: hidden !important;
}

---

열 사이에 줄이 있으면 아래 코드를 사용하십시오.

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td{
border: hidden;
border-color: white;
}

나는 이것을 Primefaces 5.1로 확인했습니다.

<h:head>
     <title>Login Page</title>    
     <h:outputStylesheet library="css" name="common.css"/>
</h:head> 

<p:panelGrid id="loginPanel" columns="3" styleClass="panelNoBorder">
<p:outputLabel value="Username"/> <p:inputText id="loginTextUsername"/>
<p:outputLabel value="Password"/> <p:password id="loginPassword"/>
<p:commandButton id="loginButtonLogin" value="Login"/> <p:commandButton id="loginButtonClear" value="Clear"/>
</p:panelGrid>  

---

요즘 Primefaces 5.x에는 "columnClasses"라는 이름의 panelGrid 속성이 있습니다.

.no-border {
    border-style: hidden !important ; /* or none */
}

따라서 2 개의 열이있는 panelGrid에 대해 css 클래스를 두 번 반복합니다.

<p:panelGrid columns="2" columnClasses="no-border, no-border">

To other elements, the ugly " !important " is not necessary, but to the border just with it work fine to me.

---

Try

<p:panelGrid styleClass="ui-noborder">

---

Just add those lines on your custom css mycss.css

table tbody .ui-widget-content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #FFFFFF;
    color: #333333;
}

---

As mentioned by BalusC, the border is set by PrimeFaces on the generated tr and td elements, not on the table. However when trying with PrimeFaces version 5, it looks like there is a more specific match from the PrimeFaces CSS .ui-panelgrid .ui-panelgrid-cell > solid which still result in black borders being shown when appyling the style suggested.

Try using following style in order to overide the Primefaces one without using the !important declaration:

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

As mention make sure your CSS is loaded after the PrimeFaces one.

---

If you just want something more simple, you can just change:

<p:panelGrid >

</p:panelGrid>

to:

<h:panelGrid border="0">

</h:panelGrid>

That's worked fine for me

---

나를 위해 다음 코드 만 작동합니다.

.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
    border-width: 0
}

<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>

---

전통적인 테마와 모든 현대 테마에 테두리가 없도록하려면 다음을 적용하십시오.

<!--No Border on PanelGrid-->
    <h:outputStylesheet>
        .ui-panelgrid, .ui-panelgrid td, .ui-panelgrid tr, .ui-panelgrid tbody tr td
        {
            border: none !important;
            border-style: none !important;
            border-width: 0px !important;
        }
    </h:outputStylesheet>

---

datatable 안에 panelgrid를 배치 했으므로 내 작업 솔루션은

.ui-datatable-scrollable-body .myStyleClass tbody td{border:none;}

...에 대한

<h:panelGrid  styleClass="myStyleClass" >...</h:panelGrid>

---

이것도 시도하십시오

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

---

아래 스타일 수정을 사용하여 Primefaces 라디오 버튼의 테두리를 제거하십시오.

.ui-selectoneradio td, .ui-selectoneradio tr
{
    border-style: none !important
}

참고 URL : https://stackoverflow.com/questions/10421581/how-to-remove-border-from-specific-primefaces-ppanelgrid