如何控制PanelGrid里面DataTable的对齐方式？

更新时间：2023-12-04 19:00:16

呈现基本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; 
}

另请参见：

HTMLDog CSS教程

CSSTutorial.net

更新：它应该工作。这是一个复制品的不可思议的例子。

 <！DOCTYPE html> 
< html lang =en> 
< head&gt 
< 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;
}

<!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.

上一篇 : ：我如何通过单击html按钮执行脚本?下一篇 : Chrome 不会删除会话 cookie

如何控制PanelGrid里面DataTable的对齐方式？

另请参见：

See also:

相关阅读

推荐文章