JSF의 중첩 된 panelGrids/dataTables에서 이중 테두리 방지

Question

웹 응용 프로그램에서 작업하고 중첩 테이블을 사용하여 필요한 레이아웃을 얻습니다. 불행히도 중첩 테이블 셀에 테두리를 그리는 것을 피할 수는 없습니다. 나는 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; }