So entfernen Sie xPage Tabellenrahmen

Question

Erste Frage ist: Muss ich wirklich Tabellen verwenden, um Etiketten/Felder auf meinem xPage auszurichten/organisieren? Es ist wie eine alte Entwicklung (mit versteckten Tabellen), die hilft, Komponenten auf dem Formular/der Seite zu gruppieren. Wie auch immer, ich habe gerade von Notes 8 auf Notes 9 gewechselt und Bootstrap 3 Theme angewendet. Jetzt haben alle Tabellen einen oberen Rand, den ich nicht entfernen kann. Es ist etwas komisch. Selbst meine eigene Klasse entfernt die Grenze nicht.

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

Wenn ich versuche, Randgröße/Farbe zu setzen, funktioniert es nur für links, rechts und unten. Wenn ich Grenze Größe 2px eingestellt dann setzt er die Farbe für oberen Rand als auch

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

So wie ich Tabellen Grenzen auf meiner Seite entfernen. Siehe Bild unten

Answer 1

Fügen Sie die folgenden Zeilen zu Ihrem 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; 
} 

Sie benötigen keine Tabelle Label und Feld auszurichten. Verwenden Stil „display: inline-block“ und stellen Sie eine geeignete Breite:

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

Verwenden Sie separate Klassen für Etiketten- und Felder mit diesen Arten die gleiche align auf alle Label/Felder in Ihrer Anwendung einzustellen.

Answer 2

Wenn Sie zu einem Bootstrap-Thema wechseln, benötigen Sie die Tabellen für die Ausrichtung nicht, und Sie würden ein responsives Design erstellen, das sich an mobile Geräte anpassen lässt.