Empty t:dataTable might be rendering invalid HTML?

I use Tomahawk 1.1.8 and I'm trying to build/render a dataTable even if it's empty. (rendered="true" as requirement)

Considering our Bean provides an empty list (no rows to be displayed by t:dataTable). Why does Tomahawks' t:dataTable just render following "invalid" HTML even if we have a header providing more than one column:

<tbody><tr><td></td></tr></tbody>

The JSF Code for the t:dataTable is as usual:

<t:dataTable value="#{bean.list}" var="dataItem">
  <h:column>
    <f:facet name="header">
      <h:outputText value="A"/>
    </f:facet>
    <h:outputText value="#{dataItem.a}" />
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText value="B"/>
    </f:facet>
    <h:outputText value="#{dataItem.b}" />
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText value="C"/>
    </f:facet>
    <h:outputText value="#{dataItem.c}" />
  </h:column>
</t:dataTable>

In contrast, JSF h:dataTable renders "better" by just omitting the complete tr tag (=even if I'm not sure if this might be "invalid" HTML, too):

<tbody></tbody>

My problem with this is the absence of inner table top borders/rules when css "border-collapse:collapse;" is active.

I prepared two HTML examples. One describing the actual fact and the other a possible solution how Tomahawk possibly could fix it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title>less td than th in one row</title>

<style type="text/css" media="screen">
table {
    border-collapse: collapse;
}

th, td {
    border:1px solid #716F70;
}
</style>
</head>
<body>
less td than th in one row: borders in FF3.x e.g. are rendered just for two table body cells:
<br />
<table border="1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>

  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td>cell4</td>
    <td>cell5</td>

    <td>cell6</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td/>
  </tr>
</table>
</body>
</html>

...now how it would be better with colspan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title>less td than th in one row: border with colspan ok</title>

<style type="text/css" media="screen">
table {
    border-collapse: collapse;
}

th, td {
    border:1px solid #716F70;
}
</style>
</head>
<body>
less td than th in one row: border (top) rendered for complete row, because of &lt;td colspan="5"/&gt; in cell 2 of row 2:
<br />
<table border="1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td colspan="5"/>
  </tr>
</table>
</body>
</html>

A colspan over all cells of a row might be the best, I think.

Some Browsers like IE or Opera don't mind, however Firefox does and I can take this point, too.

Are there any workarounds or patterns how to get the best result out of this? I ask, because I might be missing a technique.

Thanks

ansaurus

tags:

views:

answers:

Empty t:dataTable might be rendering invalid HTML?

related questions