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