Vermeidung von doppelten Rahmen in verschachtelten panelGrids/dataTables in JSF

Question

Ich arbeite an einer Webanwendung und verwende verschachtelte Tabellen, um das benötigte Layout zu erreichen. Leider kann ich nicht vermeiden, die Grenzen der verschachtelten Tabellenzellen zu zeichnen. Ich habe versucht, CSS und border-collapse zu verwenden: collapse; aber das funktioniert nicht. Ich bin kein Genie bei CSS, aber hier ist ein Beispiel, was ich habe:

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> 

Gibt es eine Möglichkeit, ohne den Rahmen um die innere panelGrid Zellen loszuwerden der äußeren Grenzen loszuwerden?

Answer 1

table table td { border: 0; } 

zu Ihrem CSS hinzufügen.

Sie können es sogar spezifischer machen, indem Sie der inneren Tabelle eine CSS-Klasse geben.

<h:panelGrid styleClass="innertable"> 

mit

table.innertable td { border: 0; }