PRIMEFACES Optimale Spaltenbreite in Tabellen

[DaBe1812]

Hi,
ich habe eine kleine optische Herausforderung in Primefaces 11.
Ich habe eine Page für den Import einer Excel Tabelle. Für den Workflow ist es wichtig, dass die Tabelle in einem Panel angezeigt wird, weil der User dort im weiteren Verlauf Informationen ablesen können soll.
Leider hat die Tabelle seeehr viele Spalten (immer so um die 100) und ist nicht immer gleich groß, je nach Lieferant sind verschiedene Spalten nicht vorhanden.
Deswegen habe ich die Tabelle auf der Seite dynamisch gemacht, damit das klappt.

<p:panel header="Importdaten" id="tablePanel">
    <h:panelGrid columns="1" rendered="#{not empty hwimportwiz.hwImport.file}">
        <p:dataTable id="importFileContent" var="line" value="#{hwimportwiz.hwImport.sheet.tableSheetContent}" scrollable="true"
                scrollHeight="100%" scrollWidth="100%" allowUnsorting="false">
            <p:columns value="#{hwimportwiz.hwImport.sheet.columns}" var="column" headerText="#{column.header}"
                    field="get(column.property)" />
        </p:dataTable>
    </h:panelGrid>
</p:panel>

Scrollable hab ich schonmal an geschaltet, trotzdem ist jede Spalte immer nur 5px groß. Ich hab echt Probleme mit CSS und in Tabellen wird es nicht einfacher. Hat einer von euch eine zündende Idee, wie man das in Primefaces sauber abbilden kann, dass später die Spalten alle die optimale Breite haben?
Ich möchte es vermeiden, dass alle Spalten 200px groß sind, weil das auch Werte, wie "Anzahl Prozessoren" drin sind, die bräuchten wirklich nicht so breite Zellen.

 

[Oneixee5]

ich kenne Primefaces nicht so genau. Vermutlich ist es aber am Ende eine HTML-Tabelle. Dort ist die automatische Spaltenbreite eigentlich "default". Das verhalten lässt sich aber auch mit CSS provozieren.

td {
    width: 1px;
    white-space: nowrap;
}

@see http://jsfiddle.net/k4r52p6m/1/

 

[DaBe1812]

Primefaces macht ziemlich viel an CSS selbst, aber ich kann auch ein wenig CSS injecten. Aber dein Fiddle hat ja auch keine Probleme mit den Spalten, wenn ich das CSS für td raus nehme.
Das CSS, was Primefaces automatisch erzeugt hat, sieht ungefähr so aus:

.ui-datatable-scrollable table, .ui-datatable-sticky table {
    table-layout: fixed;
}
.ui-datatable table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
* {
    box-sizing: border-box;
}
user agent stylesheet
table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-style: normal;
    color: -internal-quirk-inherit;
    text-align: start;
    border-spacing: 2px;
    border-color: grey;
    font-variant: normal;
}

Hoffe das hilft.

 

[mihe7]

Probier mal

<p:dataTable tableStyle="width: auto;" ...

 

[Oneixee5]

Die automatische Spaltenbreite wird von "table-layout: fixed;" kaputt gemacht.

fixed
Die Tabellen- und Spaltenbreiten werden durch die Breiten der Tabellen- und Spaltenelemente oder durch die Breite der ersten Zellenzeile festgelegt. Zellen in nachfolgenden Zeilen haben keinen Einfluss auf die Spaltenbreiten.

Bei der "festen" oder "fixierten" fixed Layoutmethode kann die gesamte Tabelle gerendert werden, sobald die erste Tabellenzeile heruntergeladen und analysiert wurde. Dies kann die Renderingzeit bei der "automatischen" auto Layoutmethode beschleunigen, aber der Inhalt nachfolgender Zellen passt möglicherweise nicht in die bereitgestellten Spaltenbreiten. Zellen verwenden die Eigenschaft overflow, um zu bestimmen, ob überlaufende Inhalte abgeschnitten werden sollen. Dies erfolgt aber nur, wenn die Breite der Tabelle bekannt ist; andernfalls werden die Zellen nicht überlaufen.

Du hast die Möglichkeit "table-layout: auto;" zu verwenden oder die Spaltenbreiten selbst festzulegen.

 

[DaBe1812]

Hi,
@mihe7 genau das hat funktioniert. Danke

 

[DaBe1812]

Muss doch nochmal darauf zurück kommen:
Die Überschriften und Zellen sind jetzt nicht mehr Übereinander.
Scheinbar werden die beiden Bereiche getrennt voneinander optimiert.