如何控制PanelGrid里面DataTable的对齐方式？ [英] How to control alignment of DataTable inside of a PanelGrid?
问题描述
我怎么能告诉panelGrid顶部对齐内容？或者，我的方法是完全错误的，我需要做一些不同的事情（如果是这样，欢迎提出建议）
呈现基本HTML。使用CSS完成样式。右键单击Web浏览器中的页面，然后选择查看源代码。你会看到< h：panelGrid> 呈现一个HTML < table> 元素， code>< h：dataTable> 被呈现为一个HTML < table> 元素，反过来也嵌套在由< h：panelGrid> 呈现的< td> 元素。所以，你基本上只是想设置 vertical-align 的< td> < h：panelGrid> 至 top 。
假设< h：panelGrid> 有一个 id ，最终为< table id =使用以下CSS：
＃panelGridId> tbody> tr> td {
vertical-align：top;
}
另请参见：
< hr>
更新：它应该工作。这是一个复制品的不可思议的例子。
<！DOCTYPE html>
< html lang =en>
< head>
< title> SO问题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>
所有对齐到顶部。没有规则，所有的都会集中。由于不清楚生成的标记如何，所以很难判断您需要应用什么规则。
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.
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 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.
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;
}
See also:
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>
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屋！
