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呈现给我。

他们都不是真正的解决方案，但也许他们可以帮助你。