Question

I am working on a web application and using nested tables quite a bit to achieve the needed layout. Unfortunately, I am unable to avoid drawing the borders on the nested table cells. I’ve tried using CSS and border-collapse: collapse; but that doesn’t work. I’m no wiz at CSS but here’s a sample of what I have:

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>

Is there any way to get rid of the border around the inner panelGrid’s cells without getting rid of the outer borders?

Answer 1

Add

table table td { border: 0; }

to your CSS.

You can even make it more specific by giving the inner table a CSS class.

<h:panelGrid styleClass="innertable">

with

table.innertable td { border: 0; }