---
title: "Einfache Tabelle im CSS umbrechen"
url: "https://www.typo3.net/d/122546-einfache-tabelle-im-css-umbrechen"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Frage"]
created: "2016-05-20"
last_reply: "2016-07-25"
replies: 5
solved: false
page: 1
pages: 1
lang: "de"
---

# Einfache Tabelle im CSS umbrechen

Frontend › Barrierefreiheit · 5 Antworten · gestartet 2016-05-20

## Eröffnungsbeitrag

**sunlite** · 2016-05-20 · [Beitrag #1](https://www.typo3.net/d/122546-einfache-tabelle-im-css-umbrechen/1)

Hi,

ich habe eine kurze Frage.
Bei einer einfachen Tabellenstruktur via CSS ... ist es möglich einen Umbruch innerhalb einer Tabelle hervorzurufen?

```html
 <div class="grid">
      <div class="eventspalte spalte1">###T4###</div>
      <div class="eventspalte spalte2">###T3###</div>
      <div class="eventspalte spalte3">###T2###</div>
      <div class="eventspalte spalte4">###T1###</div>     
   </div>
```

```css
.grid{
   display: table;
   padding-left:25px;
   padding-right:25px;
   padding-bottom:25px;
   max-width: 1300px;
   margin:0 auto;
}

.eventspalte{
   width:25%;
   display:table-cell;
   border:none;
}

.spalte1{background-color: #000000;}
.spalte2{background-color: #555555;}
.spalte3{background-color: #999999;}
.spalte4{background-color: #cccccc;}
```

Nun habe ich 4 Infokästen nebeneinander, die immer die gleiche Höhe haben.

1 2 3 4

Jetzt will ich es allerdings responsiv haben mittels Media-Query.

```css
@media only screen and (max-width : 900px) {}
```

Also bei einer Breite von 900px soll die erste und zweite Spalte je 50% erreichen und oben stehen, und die dritte und vierte Spalte mit je 50% darunter. Also:

1 2
3 4

Mit einem clear:both; komme ich da leider nicht weiter. Hat jemand eine Idee, wie ich diese Tabelle nach der zweiten Tabellenzelle umbrechen kann?

Vielen Dank
Saludos

## Antworten

### [#2](https://www.typo3.net/d/122546-einfache-tabelle-im-css-umbrechen/2) · BastianBalthasarBux · 2016-07-04

Hmm, is recht easy.

```css
media only screen and (max-width : 900px) {
  .eventspalte{
   width:50%;
  }
}
```

Falls es nicht funktioniert noch ein !important dranhängen.

Ich würde aber insgesamt eher auf eines der bewährten grid-frameworks zurückgreifen.
eventuell eines der kleineren ... ;)

### [#3](https://www.typo3.net/d/122546-einfache-tabelle-im-css-umbrechen/3) · etux · 2016-07-04

> **BastianBalthasarBux schrieb:**
>
> Hmm, is recht easy.

Könntest Du das auch demonstrieren? ;)
Immerhin geht es hier darum, die W3 Specifications komplett außer Kraft zu setzen.
Nebenbei: Breiten-Angaben (width) wirken bei Tabellen (auch bei CSS-Tables) und Tabellen-Zellen wie „min-width“.

> **sunlite schrieb:**
>
> Mit einem clear:both; komme ich da leider nicht weiter.

Es floatet ja auch nichts. ;)

> **sunlite schrieb:**
>
> Hat jemand eine Idee, wie ich diese Tabelle nach der zweiten Tabellenzelle umbrechen kann?

Für die Ansicht unter 900px müsstest Du die Tabellenstruktur komplett entfernen und eine neue Formatierung vornehmen: die Elementen als Inline(-Block) formatieren, floaten, Flexbox, ...etc.
Oder gleich für beide Ansichten Flexbox nehmen.

### [#4](https://www.typo3.net/d/122546-einfache-tabelle-im-css-umbrechen/4) · BastianBalthasarBux · 2016-07-25

@etux
1. Ich habe es doch demonstriert? Siehe mein CSS.
2. Du hast wohl nicht das gesamte Ausgangsposting gelesen? -> Es gibt hier keine Tabellenstruktur, das von sunlite gepostete HTML-Snippet beinhaltet keine Tabelle, sondern lediglich eine div-Struktur die gefloatet wird. Zusammen mit meinem Snippet wird, den W3C Spezifikationen entsprechend dann eben umgebrochen.

### [#5](https://www.typo3.net/d/122546-einfache-tabelle-im-css-umbrechen/5) · BastianBalthasarBux · 2016-07-25

oh, sorry, ich hab nicht sauber genug gelesen (und nachgedacht) ...
da ist ja ein display:table sowie ein display:table-cell ...
das könnte nun theoretisch zu problemen führen.
müsste man aber natürlich erst xbrowser austesten ... hmm

### [#6](https://www.typo3.net/d/122546-einfache-tabelle-im-css-umbrechen/6) · BastianBalthasarBux · 2016-07-25

```css
.grid {
/*        display: table; */
       padding-left:25px;
       padding-right:25px;
       padding-bottom:25px;
       max-width: 1300px;
       width:100%;
       margin:0 auto;
    }
     
    .eventspalte {
       width:25%;
       float:left;
/*        display:table-cell; */
       border:none;
    }
     
    .spalte1{background-color: #000000;}
    .spalte2{background-color: #555555;}
    .spalte3{background-color: #999999;}
    .spalte4{background-color: #cccccc;}
     
    @media only screen and (max-width : 900px) {
      .eventspalte {
        width:50%;
      }
    }
```

das funktioniert jedenfalls.
und trotzdem bleib ich dabei, dass man hier sinnvollerweise auf eines der grid-frameworks zurückgreifen sollte ...

---

Quelle: „Einfache Tabelle im CSS umbrechen“, typo3.net, https://www.typo3.net/d/122546-einfache-tabelle-im-css-umbrechen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.