如何删除xPage表格边框

Question

第一个问题是：我真的需要使用表来对齐/组织我的xPage上的标签/字段吗？ 这就像旧式开发（使用隐藏表）有助于在表单/页面上对组件进行分组。 无论如何，我只是从Notes 8切换到Notes 9并应用Bootstrap 3主题。现在所有表都有顶部边框，我无法删除。这很奇怪。即便是我自己的班级也不会删除边框。

table, th, td {
    border-collapse: collapse;
}

此外，如果我尝试设置边框大小/颜色，它只适用于左，右和底。如果我设置边框大小为2px，那么它也设置顶部边框的颜色

table, th, td {
    border: 1px solid black;
}

那么如何删除页面上的表格边框。见下图

Answer 1

将以下行添加到CSS中：

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, 
.table>tbody>tr>td, .table>tfoot>tr>td {
     border-top: 0px;
}

您不需要表格来对齐标签和字段。使用样式“display：inline-block”并设置适当的宽度：

<xp:label
    value="Label1"
    id="label1"
    for="inputText1"
    style="width:20%;display:inline-block;">
</xp:label>
<xp:inputText
    id="inputText1"
    value="#{sessionScope.input1}"
    style="width:75%;display:inline-block;">
</xp:inputText>

对具有这些样式的标签和字段使用单独的类，以将相同的对齐设置为应用程序中的所有标签/字段。

Answer 2

如果您转到Bootstrap主题，则不需要用于对齐的表格，您将创建一个可以适应移动设备的响应式设计。