Empty t:dataTable might be rendering invalid HTML?

Question

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">
<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">
<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

user1018494 user1018494 · Accepted Answer · 2011-10-28T14:21:02

I know this is an old question, but I encountered a similar problem and the approach I used to solve this was by checking if the data exists by using empty in the following way.

bodyStyleClass = "#{empty bean.list ? 'hidden' : ''}"

The CSS class 'hidden' then gets applied to the body of the table, so you're left with just the table column headers and the display problem goes away. Your CSS should look like this:

.hidden {
    display: none;
}

Hope this helps anyone encountering this in the future. This stack overflow question may also be of use to you, as well as the reference on http://myfaces.apache.org/tomahawk-project/tomahawk/tagdoc/t_dataTable.html if you wish to do something else other than apply a class to the body level of your table.

Empty t:dataTable might be rendering invalid HTML?

1 Answers