Zentrieren einer Tabelle mit Überschrift

[Rolf B]

Hallo alle,

ich glaube, ich habe das schon mal gefragt, finde es aber nicht wieder.

Meine Seite hat eine tabelle mit einer Überschrift:

<section id="foo">
  <h2>Header</h2>
  <table>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td class="beschreibung">Col 3</td>
    <td>Col 4</td>
  </tr>
  </table>
</section>

Das ist eine reduzierte Code-Skizze zur Illustration des Problems, nicht der reale Code.

Ich möchte, dass diese Tabelle ihre Breite nach Inhalt der .beschreibung Spalte anpasst (was ich mit min-width für diese Spalte löse), ich möchte, dass die Überschrift und die Tabelle linksbündig übereinander stehen und ich möchte, dass Überschrift PLUS Tabelle horizontal zentriert auf der Seite stehen.

|  anderer Kram anderer Kram anderer Kram anderer Kram anderer Kram     |
|                                                                       |
|                Header                                                 |
|                Col1   Col2   Cooooooooooool 3   Col4                  |

Besagter anderer Kram wäre in einer anderen Section gedacht.

Ich schaffe es aber nicht, das ohne einen Hilfs-Container um h2 und table herum zu stylen. Dabei habe ich doch einen Container: die Section. Aber die Section ist entweder 100% breit, oder ich muss die Breiten von außen nach innen festlegen, damit margin:auto zum Zentrieren der Section greift. Das will ich aber nicht.

Mit dem div geht es, ich mache dann #foo zur Flexbox mit flex-direction:column und align-items:center -> Fiddle. Ich könnte den Hilfs-Container auch inline-block definieren und text-align:center auf die Section setzen...

Unabdingbare Randbedingung: Es muss unter IE11 funktionieren. Der ist leider immer noch der Hauptbrowser in meinem Nutzerkreis.

MUSS dieser Hilfs-Container sein?

Rolf

[beatovich]

hallo

div kann entfernt werden.

html, body {height:100%; padding:0; margin:0;}
#foo {
  display:flex; flex-direction:column;
  align-items: center;
  border: 1px solid red;
  height:100%;
  justify-content:center;
}
#foo > * {flex:0 1 auto;}
h2 { background-color: #fcc; margin:0;}
table {
  border: 2px solid blue; margin:0;
}
table td { width: 4em;}
table td:nth-of-type(3) { min-width: 8em;}

[Rolf B]

Hallo beatovich,

muss das für die Akten leider mit Minus bewerten, weil der Lösungsansatz die Problemstellung nicht beachtet. Wenn ich es nur falsch verstanden habe, dann nehme ich das Minus gern wieder weg.

Rolf

[beatovich]

hallo

Ach msie11 da würd ich zuerst die ältere Syntax anwenden https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

Und dann eventuell mit @support den ie 11 ausschliessen.

oder einfach die Liste in https://github.com/philipwalton/flexbugs durchgehen. Gibt ein paar workarounds.

[Rolf B]

Hallo beatovich,

danke für den Hilfsversuch, aber ich glaube, da hast Du zu schnell aus der Hüfte geschossen, bzw. in die Schublade gegriffen ohne zu testen. Oder ich hab's nicht kapiert...

• caniuse sagt: IE10 kennt die 2012er Syntax. Die 2009-er Syntax ist in FF vor Version 22. IE10 und Opa Fuchs sind mir aber egal, die sind nicht auf den Kundenrechnern.
• IE11 kennt die aktuelle Syntax, ist aber buggy. Darum teste ich parallel mit IE11 und Chrome. Wenn's im IE11 nicht funzt, kann es ein Bug sein. Wenn's in Chrome auch nicht funzt, befindet sich das Problem wohl eher vor dem Bildschirm.
• html,body { height:100% } ist irrelevant; meine section hat keine Prozent-Höhe
• justify-content:center ändert auch nichts wenn es auf der section ist; weil - siehe vorigen Punkt - keine explizite Höhe und damit kein Bedarf und kein Platz auf der Hauptachse.
• flex: 0 1 auto ist der Default und ändert darum nichts.
• und wenn ich mit deinem CSS das div weglasse, ist die Überschrift mittig über der Table. Da soll sie aber nicht hin.

Wunsch (oben, mit div) und Wirklichkeit (unten), sieht in IE11 und Chrome 66 gleich aus.

Rolf

[beatovich]

hallo

sorry

dafür hab ich dir jetzt einen ganz anderen Ansatz:

#foo {
  display:table;
  margin:auto;
  border: 1px solid red;
}
#foo > * {display:table-row}
h2 { background-color: #fcc; }
table {
  border: 2px solid blue;
}
table td { width: 4em;}
table td:nth-of-type(3) { min-width: 8em;}

[Gunnar Bittersmann]

@@Rolf B

ich möchte, dass die Überschrift und die Tabelle linksbündig übereinander stehen und ich möchte, dass Überschrift PLUS Tabelle horizontal zentriert auf der Seite stehen. […] Unabdingbare Randbedingung: Es muss unter IE11 funktionieren.

Anders gesagt: Du willst, dass width: min-content bzw. max-content im IE 11 funktioniert. 🤣

Der Unterschied ist bei langer Überschrift sichtbar; bei ersterem bestimmt die Tabelle die Breite der Box (innere Planeten), im zweiterem die Überschrift (äußeren Planeten).

Sag mal, muss es denn section mit Überschrift (im Screenreader anwählbar) sein oder handelt es sich um eine Tabellenüberschrift (Exoplaneten)?

LLAP 🖖

[Rolf B]

Hallo Gunnar,

min-/max-content war mir bekannt, aber ich kann's eben nicht nutzen.

Screenreader braucht keiner meiner Anwender; das ist ein Portal für PDF Dokumente und die Dokumente sind zum großen Teil gescannte Images. Ein Screenreader würde wohl verzweifeln.

Aber table/caption dürfte mein Problem lösen. Eigentlich habe ich genau das gesucht, nur nicht wiedergefunden.

Rolf

[marctrix]

Hej Rolf,

min-/max-content war mir bekannt, aber ich kann's eben nicht nutzen.

Screenreader braucht keiner meiner Anwender; das ist ein Portal für PDF Dokumente und die Dokumente sind zum großen Teil gescannte Images. Ein Screenreader würde wohl verzweifeln.

Es gibt ja Schrifterkqnnungssoftware... 😉

Ist natürlich umständlich für Blinde und kein Grund es so zu machen, aber grundsätzlich können Blinde zur Not auch mit so was etwas anfangen. Hängt aber stark von der Art der PDFs ab und wie gut der Text sich erkennen lässt.

Marc

[Matthias Apsel]

Hallo Rolf B,

Meine Seite hat eine tabelle mit einer Überschrift:

MUSS dieser Hilfs-Container sein?

table + caption?

Bis demnächst
Matthias