Einfache Tabelle im CSS umbrechen

Hi,

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

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

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

@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

Hmm, is recht easy.

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

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.

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

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

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