JSF / CSS：在表中对齐数据表

Question

我正在JDeveloper上进行Java EE项目。我在使页面看起来像我想要的方式时遇到麻烦，特别是使表格中的项目正确对齐。似乎如果一个单元格旁边的列有更多行，则更少行的单元格将垂直居中。

我想知道我的css文件中需要更改什么属性，以便单元格始终与边框的左上角对齐。

我该如何做： enter image description here

看起来更像这样：enter image description here

这是我的jsf代码：

<table class="BottomTable">
                <tr>
                    <td style="border: 1px solid Black">
                        <h:dataTable value="#{LaunchpadData.launchpadLinksFindQuad3}" var="items">
                            <h:column>
                                <f:facet name="header">
                                    <h:graphicImage url="/banner.png" height="32" width="32"/>
                                    <h:outputText value="Banner"/>
                                </f:facet>
                                <a href="#{items.url}"> #{items.name} </a>
                            </h:column>
                        </h:dataTable>
                    </td>
                    <td style="border: 1px solid Black">
                        <h:dataTable value="#{LaunchpadData.launchpadLinksFindQuad4}" var="items">
                            <h:column>
                                <f:facet name="header">
                                <h:graphicImage url="/banner.png" height="32" width="32"/>
                                    <h:outputText value="Host Systems / Service Orders / Work Orders / Outage"/>
                                </f:facet>
                                <a href="#{items.url}"> #{items.name} </a>
                            </h:column>
                        </h:dataTable>
                    </td>
                </tr><tr>
                    <td style="border: 1px solid Black">
                        <h:dataTable value="#{LaunchpadData.launchpadLinksFindQuad5}" var="items">
                            <h:column>
                                <f:facet name="header">
                                    <h:graphicImage url="/banner.png" height="32" width="32"/>
                                    <h:outputText value="Customer"/>
                                </f:facet>
                                <a href="#{items.url}"> #{items.name} </a>
                            </h:column>
                        </h:dataTable>
                    </td>
                    <td style="border: 1px solid Black">
                        <h:dataTable value="#{LaunchpadData.launchpadLinksFindQuad6}" var="items">
                            <h:column>
                                <f:facet name="header">
                                    <h:graphicImage url="/banner.png" height="32" width="32"/>
                                    <h:outputText value="Common/General"/>
                                </f:facet>
                                <a href="#{items.url}"> #{items.name} </a>
                            </h:column>
                        </h:dataTable>
                    </td>
                </tr>
            </table>

这是我的CSS：

a {
text-decoration: none ;
}

.BottomTable {
    border-collapse:collapse;
    border-style:hidden;
    margin-left:auto;
    margin-right:auto;
    font-family: MH-Houschka-Book;
    text-align: left;
}

.BottomTable a {
    color: Black;
    padding-left: 24pt;
}

.BottomTable th {
    color: #0369B2;
}