Question

我使用Tomahawk 1.1.8并且我正在尝试构建/渲染dataTable，即使它是空的。（render =“true”作为要求）

考虑到我们的Bean提供了一个空列表（t：dataTable不显示任何行）。为什么Tomahawks's：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确实如此，我也可以采取这一点。

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

由于

Answer 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上的引用。

空t：dataTable可能会呈现无效的HTML？

1 个答案: