在JSF中避免嵌套panelGrids/dataTable中的雙邊框

Question

我正在研究一個Web應用程序並使用嵌套表來實現所需的佈局。不幸的是，我無法避免在嵌套表格單元上繪製邊框。我試過使用CSS和border-collapse：collapse;但那不起作用。我在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

添加

table table td { border: 0; } 

你的CSS。

你甚至可以通過給內部表一個CSS類來使它更具體。

<h:panelGrid styleClass="innertable"> 

與

table.innertable td { border: 0; }