JSF内のネストされたpanelGrids/dataTablesの二重枠を避ける

Question

私はWebアプリケーションで作業していて、ネストしたテーブルを使って必要なレイアウトを実現しています。残念ながら、ネストされた表のセルに枠線を描画することは避けられません。私はCSSと境界崩壊を使用しようとしました：崩壊;しかし、それは動作しません。私はCSSで何の達人だんが、ここで私が持っているもののサンプルです：

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> 

は、外側の境界線を取り払うことなく、内側のpanelGridの細胞の周囲に境界線を取り除く方法はありますか？

Answer 1

あなたのCSSに

table table td { border: 0; } 

を追加します。

内部テーブルにCSSクラスを指定することで、より具体的にすることもできます。完全に働いた

table.innertable td { border: 0; }