Éviter les doubles bordures dans les panneauxGrids/dataTables imbriqués dans JSF

Question

Je travaille sur une application Web et j'utilise pas mal de tables imbriquées pour obtenir la disposition requise. Malheureusement, je suis incapable d'éviter de dessiner les bordures sur les cellules de la table imbriquée. J'ai essayé d'utiliser CSS et border-collapse: collapse; mais ça ne marche pas. Je ne suis pas wiz à CSS mais voici un échantillon de ce que j'ai:

table { border-collapse: collapse; width: 75%; } 
table.innerTable { width: 100%; border-collapse: collapse; } 
td { border: 1px solid black; border-collapse: collapse; } 
th { background-color: #6699FF; color: black; } 
td { background-color: #d1d1ff; color: #101030; text-align: center;} 
.capAttribute { font-weight: bold; } 

<h:panelGrid columns="2"> 
    <h:outputText value="Start Time (MM-dd-yyyy HH:mm)" styleClass="capAttribute"/> 
    <h:panelGrid columns="2" > 
    <h:inputText id="starttime" value="#timeBean.targetTime.timeStart}" 
     converterMessage="Please enter a date in the specified format."> 
     <f:convertDateTime pattern="MM-dd-yyyy HH:mm" /> 
    </h:inputText> 
    <h:message for="starttime"/> 
    </h:panelGrid> 
    <h:outputText value="End Time (MM-dd-yyyy HH:mm)" styleClass="capAttribute"/> 
    <h:panelGrid columns="2" > 
    <h:inputText id="endtime" value="#{timeBean.targetTime.timeEnd}" 
     converterMessage="Please enter a date in the specified format."> 
     <f:convertDateTime pattern="MM-dd-yyyy HH:mm" /> 
    </h:inputText> 
    <h:message for="endtime"/> 
    </h:panelGrid> 
</h:panelGrid> 

Est-il possible de se débarrasser de la frontière autour des cellules du panelGrid intérieur sans se débarrasser des frontières extérieures?

Answer 1

Ajouter

table table td { border: 0; } 

à votre CSS.

Vous pouvez même le rendre plus spécifique en donnant à la table interne une classe CSS.

<h:panelGrid styleClass="innertable"> 

avec

table.innertable td { border: 0; }