空 t:dataTable 可能会呈现无效的 HTML？答案

【问题标题】：Empty t:dataTable might be rendering invalid HTML?空 t:dataTable 可能会呈现无效的 HTML？
【发布时间】：2011-03-01 17:45:15
【问题描述】：

我使用的是 Tomahawk 1.1.8，我正在尝试构建/渲染一个 dataTable，即使它是空的。 (rendered="true" 作为要求)

考虑到我们的 Bean 提供了一个空列表（t:dataTable 不会显示任何行）。为什么 Tomahawks 的 t:dataTable 只呈现以下“无效”HTML，即使我们有一个提供多个列的标题：

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

t:dataTable 的 JSF 代码与往常一样：

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

相比之下，JSF h:dataTable 通过省略完整的 tr 标记来呈现“更好”（=即使我不确定这是否也可能是“无效”HTML）：

<tbody></tbody>

我的问题是当 css "border-collapse:collapse;" 时缺少内部桌面边框/规则处于活动状态。

我准备了两个 HTML 示例。一个描述了实际情况，另一个描述了 Tomahawk 如何修复它的可能解决方案：

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

...现在使用 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>

我认为，在一行的所有单元格上的 colspan 可能是最好的。

IE 或 Opera 等浏览器不介意，但 Firefox 可以，我也可以理解这一点。

是否有任何解决方法或模式可以从中获得最佳结果？我问，因为我可能错过了一项技术。

谢谢

【问题讨论】：

您是否为此提交了错误？

标签： jsf datatable tomahawk

【解决方案1】：

我知道这是一个老问题，但我遇到了类似的问题，我用来解决这个问题的方法是通过以下方式使用empty 检查数据是否存在。

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

CSS 类 'hidden' 然后被应用到表格的主体，因此您只剩下表格列标题并且显示问题消失了。您的 CSS 应如下所示：

.hidden {
    display: none;
}

希望这对以后遇到此问题的人有所帮助。 This 堆栈溢出问题也可能对您有用，以及 http://myfaces.apache.org/tomahawk-project/tomahawk/tagdoc/t_dataTable.html 上的参考，如果您希望做其他事情而不是将类应用于表的主体级别。

【讨论】：