如何控制 PanelGrid 内 DataTable 的对齐方式? [英] How to control alignment of DataTable inside of a PanelGrid?
问题描述
我有一个多列 panelGrid 设置，每一列都有数据表.每个数据表的长度不同.这导致 panelGrid 伸展以适应最大的数据表(到目前为止，这很好).其余的数据表垂直居中(这并不好，因为它在屏幕上看起来很糟糕)而不是顶部对齐.
I've got a multi-column panelGrid setup, with dataTables as each of the columns. Each of the dataTables is a different length. This results in the panelGrid stretching out to fit the largest dataTable (so far, that's good). The remaining dataTables are centered vertically (this is not good as it looks horrible on screen) instead of being top justified.
如何告诉 panelGrid 将内容顶部对齐?或者，我的方法是否完全错误，我需要做一些不同的事情(如果是这样，欢迎提出建议)?
How can I tell panelGrid to top-justify contents? Or, is my approach completely wrong and I need to do something different (if so, suggestions are welcome)?
推荐答案
JSF 呈现为 HTML，并且可以使用 CSS 设置样式.按如下方式检查元素:
JSF renders as HTML and can be styled with CSS. Inspect the element as follows:
- 在浏览器中查看 JSF 页面.
- 右键点击页面.
- 选择查看源.
The 假设 Assuming that the 如果网格是表单的一部分，那么 CSS 将需要包含表单的 ID.例如:
If the grid is part of a form, then the CSS will need to include the form's ID. For example: CSS 将类似于: 这是一个示例 HTML 文档，它显示了在使用 CSS 配置的表格中的垂直对齐方式:
Here's an example HTML document that shows vertical alignment working within a table configured using CSS: 全部对齐到顶部.没有规则，所有人都会集中注意力.由于不清楚您生成的标记是什么样子，因此很难确定您需要应用什么规则. All get aligned to top. Without the rule, all get centered. It's hard to tell what rule exacty you need to apply since it's unclear how your generated markup look like. 另见: 这篇关于如何控制 PanelGrid 内 DataTable 的对齐方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 元素；
元素.数据元素嵌套在
元素内，由 的 vertical-align设置为top>.
<h:panelGrid> renders an HTML <table> element; the <h:dataTable> renders as an HTML <table> element, as well. The data elements are nested inside the <td> element, rendered by the <h:panelGrid>. So, set the vertical-align of the <td> of the <h:panelGrid> to top.<h:panelGrid> 有一个 id 最终为 在 HTML 中，使用以下 CSS:
<h:panelGrid> has an id which ends up as <table id="panelGridId"> in HTML, use the following CSS:#panelGridId>tbody>tr>td {
vertical-align: top;
}
表格
Forms
<form id="amazingForm">
<h:panelGrid id="amazingGrid">
...
</h:panelGrid>
</form>
#amazingForm:amazingGrid > tbody > tr > td {
vertical-align: top;
}
示例
Example
<!-- language: html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3547485</title>
<style>#myid>tbody>tr>td { vertical-align: top; }</style>
</head>
<body>
<table id="myid">
<tbody>
<tr>
<td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
</tr>
</tbody>
</table>
</body>
</html>
登录
关闭
