CSS Cookbook – interessante Designherausforderungen bestehen 1 

Tabellen responsive machen 2 

Tabellen und RWD 1. Tabellen sehen so aus, wie wir sie erwarten, weil die passenden CSS-Regeln auf das HTML einwirken. 2. Das HTML macht nicht mehr, als Inhalte zu markieren. Es zeichnet diese semantisch aus. Die Optik kommt durch CSS. In diesem Falle durch das Browser-Stylesheet. 3. Diese Optik kann man also mit CSS-Mitteln verändern. 4. Manchmal kann dies nützlich sein. 5. Die folgenden Beispiele können hin und wieder hilfreich sein. 3 

Es gibt nicht die eine Standardlösung für Tabellen und RWD 4 

Tabelle im Browser-CSS table { display: table; } tr { display: table-row; } thead { display: table-header-group; } tbody { display: table-row-group; } tfoot { display: table-footer-group; } col { display: table-column; } colgroup { display: table-column-group; } td, th { display: table-cell; } caption { display: table-caption; } CSS 5 

Schauen wir uns das Grundprinzip an 6 

Die Ausgangslage Culture Name Display Name Culture Code ISO 639x af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 0x041C SQI ar-DZ Arabic - Algeria 0x1401 ARG ar-BH Arabic - Bahrain 0x3C01 ARH 7 

Die Tabelleneigenschaften nehmen 8 

Das CSS table, thead, tbody, tr, td, th { display: block; } CSS 9 

Das Ergebnis Culture Name Display Name Culture Code ISO 639x af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 10 

Den Header verstecken 11 

Das CSS thead { position: absolute; clip: rect(1px 1px 1px 1px); padding: 0; border: 0; height: 1px; width: 1px; over ow: hidden; } CSS 12 

Das Ergebnis af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 0x041C SQI ar-DZ Arabic - Algeria 13 

Die Header-Infos nachbauen 14 

Das HTML af-ZA Afrikaans - South Africa 0x0436 AFK HTML 15 

Das CSS td[data-title] { over ow: hidden; /* Floats einschliessen! */ } td[data-title]:before { content: attr(data-title); oat: left; font-size: .8em; color: rgba(94, 93, 82, 0.75); margin-right: 20px; } CSS 16 

Oder auch so td[data-title]:before { content: attr(data-title); display: inline-block; width: 35%; padding-right: 10px; white-space: nowrap; } CSS 17 

Culture Name Display Name Culture Code ISO 639x Culture Name Display Name Culture Code ISO 639x Culture Name Display Name Das Ergebnis af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 0x041C SQI ar-DZ Arabic - Algeria 18 

Abstand zueinander 19 

Das CSS tr { margin-bottom: 20px; border: 5px solid #444; } CSS 20 

Culture Name Display Name Culture Code ISO 639x Culture Name Display Name Culture Code ISO 639x Culture Name Das Ergebnis af-ZA Afrikaans - South Africa 0x0436 AFK sq-AL Albanian - Albania 0x041C SQI ar-DZ 21 

Die Tabelle in Tabellenoptik Top 10 Grossing Animated Films of All Time Film Title Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000 Frozen 2013 Disney $1,010,014,508 $393,614,508 $616,400,000 $150,000,000 The Lion King 1994 Disney $987,483,777 $422,783,777 $564,700,000 $45,000,000 Despicable Me 2 2013 Universal $970,761,885 $368,061,265 $602,700,620 $76,000,000 Finding Nemo 2003 Pixar $936,743,261 $380,843,261 $555,900,000 $94,000,000 Shrek 2 2004 Dreamworks $919,838,758 $441,226,247 $478,612,511 $150,000,000 Ice Age: HTML CSS Result Edit on Codepen 22 

Tabellen immer als Floats Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000 Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Frozen 2013 Disney $1,010,014,508 $393,614,508 $616,400,000 $150,000,000 Released The Lion King 1994 Released Despicable Me 2 2013 Top 10 Grossing Animated Films of All Time HTML CSS Result Edit on Codepen 23 

Warum nicht Flexbox nutzen? 24 

Mit Flexbox linearisieren table { display: ex; ex-direction: column; width: 100%; } tbody { display: ex; ex-direction: column; order: 2; } caption { order: 1;} tfoot { order: 3;} tr, th, td { display: block;} thead { /* barrierefrei ausblenden */ } CSS Codepen 25 

In voller Schönheit Top 10 Grossing Animated Films of All Time Film Title Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Sources: Wikipedia & Box Of ce Mojo. Data is current as of March 12, 2014 Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000 Frozen 2013 Disney $1,010,014,508 $393,614,508 $616,400,000 $150,000,000 The Lion King 1994 Disney $987,483,777 $422,783,777 $564,700,000 $45,000,000 Despicable Me 2 2013 Universal $970,761,885 $368,061,265 $602,700,620 $76,000,000 Finding Nemo 2003 Pixar $936,743,261 $380,843,261 $555,900,000 $94,000,000 Shrek 2 2004 Dreamworks $919,838,758 $441,226,247 $478,612,511 $150,000,000 Ice Age: Dawn of the Dinosaurs 2009 Fox $886,686,817 $196,573,705 $690,113,112 $90,000,000 Ice Age: Continental Drift 2012 Fox $877,244,782 $161,321,843 $715,922,939 $95,000,000 Shrek the Third 2007 Dreamworks $798,958,162 $322,719,944 $476,238,218 $160,000,000 Shrek Forever After 2010 Dreamworks $752,600,867 $238,736,787 $513,864,080 $165,000,000 26 

In schmaler Schönheit Top 10 Grossing Animated Films of All Time Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Toy Story 3 2010 Disney Pixar $1,063,171,911 $415,004,880 $648,167,031 $200,000,000 Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget Frozen 2013 Disney $1,010,014,508 $393,614,508 $616,400,000 $150,000,000 Released Studio Worldwide Gross Domestic Gross Foreign Gross Budget The Lion King 1994 Disney $987,483,777 $422,783,777 $564,700,000 $45,000,000 Released Studio Worldwide Gross Domestic Gross Despicable Me 2 2013 Universal $970,761,885 $368,061,265 Released Studio Worldwide Gross Domestic Gross Finding Nemo 2003 Pixar $936,743,261 $380,843,261 Released Studio Worldwide Gross Domestic Gross Shrek 2 2004 Dreamworks $919,838,758 $441,226,247 27 

Bitte beachten! Der Code ist mobile- rst aufgebaut. Erst bei größeren Breiten wird Flexbox überschrieben. @media (min-width: 52em){ .responsive-table { display: table; } .responsive-table tfoot { display: table-footer-group; } .responsive-table tr { display: table-row; } .responsive-table th, .responsive-table td { display: table-cell; } CSS 28 

Flex-Container de nieren .responsive-table { width: 100%; display: ex; ex-direction: column; } CSS .responsive-table tbody { display: ex; ex-direction: row; ex-wrap: wrap; } CSS 29 

Den Tabellenkopf barrierefrei verstecken. .responsive-table thead { position: absolute; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; over ow: hidden; } CSS 30 

Die Flexitems de nieren .responsive-table tbody tr { ex: 1 1 250px; margin-right: 20px; } CSS 31 

Die Codereihenfolge ändern HTML .responsive-table caption { order: 1;} .responsive-table tfoot { order: 3;} .responsive-table tbody { order: 2;} CSS 32 

Eine Tabelle scrollbar machen 33 

Eine scrollbare Tabelle Country Height (meters) Weight (tonnes) Jaeger Technical Speci cations Gipsy Danger United States 79 1980 Striker Eureka Australia 76 1850 Crimson Typhoon China 76 1722 Coyote Tango Japan 86 2312 Cherno Alp Russia 85 2412 34 

Das CSS .table-1 { display: block; width: 100%; } caption { display: block; } thead { display: block; oat: left; } thead tr { display: block; } CSS tbody tr { display: inline-block; } th, td { display: block; } tbody { display: block; width: auto; position: relative; over ow-x: auto; white-space: nowrap; } CSS 35 

Flexbox light 36 

Nur das passende CSS macht eine Tabelle optisch zu einer Tabelle. 37 

Tabelle im Browser-CSS table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group }< td, th { display: table-cell } caption { display: table-caption } CSS 38 

39 

40 

display: table-footer-group Mit d i s p l a y : t a b l e - f o o t e r - g r o u p sagen wir dem damit behandelten Element, es möge sich wie der Fuss einer Tabelle verhalten. Und der ist am Ende der Tabelle. 41 

display: table-footer-group 1. Artikel dazu 2. Codepen .erster-im-code { display: block; oat: none; width: auto; } .zweiter-im-code { display: table-footer-group } CSS 42 

Warum nicht die Struktur ändern? • Im Beispiel gibt es eine xe Seitenspalte und einen exiblen Inhaltsbereich. • Diese Konstruktion kann man nur in der vorgeschlagenen Art umsetzen, also mit der xen Spalte als Erstes im Code. • Denn die exible Spalte muss mit p o s i t i o n : s t a t i c realisiert werden. • Ein Float hingegen kann nicht vor eine exible Spalte springen. 43 

Das war's! • Grochtdreis.de • Speakerdeck • Mein Blog • Twitter • Webkrauts 44