如何控制panelGrid中的数据表内的调整？ [英] How to control alignment of DataTable inside of a PanelGrid?
问题描述
我有一个多列panelGrid的设置，用数据表的每一列。每个数据表的是一个不同的长度。这导致panelGrid中伸出，以适应最大的dataTable（到目前为止，这是很好的）。其余的数据表垂直居中（这是不好的，因为它看起来可怕在屏幕上），而不是被顶部对齐。
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完成。单击鼠标右键在你的网页浏览器页面，选择的查看源文件的。你会看到＆LT; H：panelGrid的＆GT; 呈现一个HTML ＆LT;表＆gt; 元素，且这些＆LT; H：dataTable的＆GT; 都被呈现为HTML ＆LT;表＆gt; 元素，以及这反过来又在里面嵌套在＆LT; TD＆GT; H; 的＆LT呈现的元素：panelGrid的＆GT; 。所以，你基本上只是想设置垂直对齐的＆LT; TD＆GT; 的<$ C $的C>＆LT; H：panelGrid的＆GT; 到顶
JSF just renders basic HTML. Styling is to be done with CSS. Rightclick the page in your webbrowser and choose View Source. You'll see that the <h:panelGrid> renders a HTML <table> element and that those <h:dataTable> are been rendered as a HTML <table> element as well which in turn are nested inside the <td> element rendered by the <h:panelGrid>. So, you basically just want to set the vertical-align of the <td> of the <h:panelGrid> to top.
假设＆LT; H：panelGrid的＆GT; 有一个 ID 这最终为＆LT;表ID =panelGridId＆GT; 在HTML中，可以使用下面的CSS：
Assuming that the <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;
}
参见：
- HTMLDog CSS教程
- CSSTutorial.net
- HTMLDog CSS tutorial
- CSSTutorial.net
See also:
更新：它应该工作。这里有一个copy'n'paste'n'runnable例子。
Update: It should work. Here's a copy'n'paste'n'runnable example.
<!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>
都得到一致顶部。如果没有规则，所有获得居中。这是很难说什么样的规则exacty你需要申请，因为它目前还不清楚你生成的标记是什么样子。
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中的数据表内的调整？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
