如何控制DataTable在PanelGrid内部的对齐？

本文介绍了如何控制DataTable在PanelGrid内部的对齐？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个多列panelGrid设置，将dataTables作为每个列。每个数据表都是不同的长度。这导致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完成的。右键点击网络浏览器中的网页，然后选择查看源代码。您将看到< h：panelGrid> 呈现HTML < table> 元素， code>< h：dataTable> 被渲染为一个HTML < table> 元素，由< h：panelGrid> 呈现的< td> 所以，你基本上只想设置<$ c $>的< td> 的 vertical-align c>< h：panelGrid> 到 top 。

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.

code>< h：panelGrid> 有一个 id ，结尾为< table id = panelGridId> 在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;
}

另请参阅：

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

这篇关于如何控制DataTable在PanelGrid内部的对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！