2

我使用 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 可以，我也可以接受这一点。

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

谢谢

4

1 回答 1

3

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

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

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

.hidden {
    display: none;
}

希望这对将来遇到此问题的人有所帮助。这个堆栈溢出问题也可能对您有用， 如果您希望做其他事情而不是应用类到你的桌子的身体水平。

于 2011-10-28T14:21:02.087 回答