p：panelGrid中的邊框樣式

Question

我想按如下方式將虛線邊框應用於PF 5.0 <p:panelGrid>。

<p:panelGrid styleClass="panelgrid-dotted-border"> 
    <f:facet name="header"> 
     <p:row> 
      <p:column colspan="2"> 
       <h:outputText value="Shipping Address"/> 
      </p:column> 
     </p:row> 
    </f:facet> 

    <p:row> 
     <p:column style="width: 200px;"> 
      <p:outputLabel for="firstName" value="First Name" style="font-weight: bold;"/> 
     </p:column> 

     <p:column style="width: 200px;"> 
      <h:outputText id="firstName" value="First Name"/> 
     </p:column> 
    </p:row> 

    <p:row> 
     <p:column> 
      <p:outputLabel for="middleName" value="Middle Name" style="font-weight: bold;"/> 
     </p:column> 

     <p:column> 
      <h:outputText id="middleName" value="Middle Name"/> 
     </p:column> 
    </p:row> 

    <p:row> 
     <p:column> 
      <p:outputLabel for="lastName" value="Last Name" style="font-weight: bold;"/> 
     </p:column> 

     <p:column> 
      <h:outputText id="lastName" value="Last Name"/> 
     </p:column> 
    </p:row> 

    <p:row> 
     <p:column> 
      <p:outputLabel for="address1" value="First Address" style="font-weight: bold;"/> 
     </p:column> 

     <p:column rowspan="8" style="vertical-align: top;"> 
      <h:outputText id="address1" styleClass="address" value="First Address"/> 
     </p:column> 
    </p:row> 

    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row> 
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row> 
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row> 
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row> 
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row> 
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row> 
    <p:row><p:column><h:outputText value="&#160;" /></p:column></p:row> 
</p:panelGrid> 

的CSS類：

.panelgrid-dotted-border.ui-panelgrid tr, .panelgrid-dotted-border.ui-panelgrid .ui-panelgrid-cell { 
    border-top : 1px dotted #000; 
    border-right : 1px dotted #000; 
    border-bottom : 1px dotted #000; 
    border-left : 1px dotted #000; 
} 

虛線邊框不正確地應用到其分別拆分爲行和列可在以下圖中可見的列和行。

虛線邊框不正確地應用到通過第一地址列和其通過網格的標頭跨越的跨越列的行。

如何正確應用虛線邊框？

Answer 1

我想我以前遇到過這個問題，它看起來像一個bug（for example）。我會爲您提供一些解決方法，如果你真的想保持它的「點」，你可以和他們一起玩，並選擇類似的東西：

優先（試試這個）：

.panelgrid-dotted-border{ 
    border-collapse: separate; 
    border-spacing: 0; 
    border: 1px dotted #929292; 
} 
.panelgrid-dotted-border.ui-panelgrid tr, .panelgrid-dotted-border.ui-panelgrid .ui-panelgrid-cell { 
    border: 1px dotted #929292; 
} 

優力邊界分開但給他們0空間。這樣你可以有點，但雙點的數量在一起。如果您還添加了較淺的顏色，雙點數看起來很好。

二：

.panelgrid-dotted-border{ 
    border-collapse: separate; 
    border-spacing: 2px; 
} 

你可以只分開的邊界。看起來也不錯！

三：

.panelgrid-dotted-border.ui-panelgrid { 
    width: 100%; 
} 

播放與表格的寬度，更寬的perfecly呈現給我。

他們都不是真正的解決方案，但也許他們可以幫助你。