Tipps und Tricks » kleine webmaster FAQ

ID #1823

wie kann man eine Tabelle mit DIV-Tags und CSS3 erstellen ?

Hallo,

noch im experimentellen alpha-Status habe ich eine Tabelle mit neuen CSS3-Regeln erstellt. Wenn man für eine Zelle eine Breitenangabe macht, gilt das dann für alle Zellen - funktioniert sinngemäß wie der veraltete table-tag.

Anstatt Prozentwerte zu verwenden, habe ich mit media-queries verschiedene Größen für gängige Auslösungen definiert. Das erscheint auf den ersten Blick mühsam, ist aber recht schnell erledigt und sorgt für eine gute performance.

tabelle mit CSS3 so sieht die Tabelle in der kleinsten Auslösung bei 320px aus.

Im CSS-Code sind noch ein paar Gradienten zu finden, die derzeit noch in keinem browser mit validen CSS3 funktionieren. Die browser-spezifischen Regeln sind in den Kommentaren eingebettet.

Im Opera 12.15 sind überstehende Ecken zu sehen - im Opera 15+ funktioniert die Darstellung dann tadellos.

  • Demo ansehen (am besten erst mit firefox 22+ oder Chrome 28+) dann mit anderen browsern !

Die demo auch in verschieden Auflösungen, vielleicht auch mit einem smartphone, testen oder das browserfenster vergrößern/verkleinern - auch mal die Seite maximal zoomen !

der CSS3-Code:

01 /* mobile first */
02 
03 
04 .twrapper {
05         margin:auto;padding:0px;
06         width:279px;
07         height:140px;
08         box-shadow: 3px 3px 5px #ccc;
09         border:1px solid #000000;
10         margin-top:10px;
11         margin-bottom:10px;
12        
13 }
14 
15 .twrapper .ttable{
16         display:table;
17         
18        
19         margin:0px;padding:0px;
20 }
21 .twrapper .tr{display:table-row;}
22 
23 
24 
25 .twrapper .td:hover{
26       opacity:0.86;color:#000;padding-left:8px;         
27         
28 
29 
30 }
31 .twrapper .td{
32         display:table-cell;
33         width:93px;
34 
35 	/*
36  background:-o-linear-gradient(bottom, #56aaff 5%, #82c0ff 100%);
37  background:-o-linear-gradient(top,#56aaff,82c0ff); 
38  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #56aaff), color-stop(1, #82c0ff) );
39  background:-moz-linear-gradient( center top, #56aaff 5%, #82c0ff 100% );
40  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#56aaff", endColorstr="#82c0ff"); 
41  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#56aff, endColorstr=#82coff)";
42  */
43 	
44 	background-color:#56aaff;
45         background:linear-gradient(top,#56aaff,82c0ff); 
46         border-bottom:1px solid #000;
47         text-align:left;
48         padding:10px;
49         
50         opacity:1.0;
51         font-weight:bold;
52         color:#333;
53 
54 }
55 
56 
57 .twrapper .th{
58         display:table-cell;
59 
60         /*
61  background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);
62  background:-o-linear-gradient(top,#0069d3,007fff); 
63  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
64  background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
65  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff"); 
66  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#0069d3, endColorstr=#007fff)";
67  */
68 
69 	background-color:#0069d3;
70         background:linear-gradient(top, #0069d3, #007fff);
71         border:0px solid #000000;
72         border-bottom:1px solid #000;
73         
74         
75         margin:0px;
76         color:#fff;
77 	text-align:center;
78         padding:4px;
79 }
80 .twrapper .tr:first-child .th{border-right:1px solid #000;}
81 .twrapper .tr:first-child .th:last-child{border-right:none;}
82 .twrapper .td{border-right:1px solid #000;}
83 .twrapper .td:last-child{border-right:none;}
84 .twrapper .tr:last-child .td{border-bottom:none;}
85 
86 
87 /* runde Ecken */
88 
89 .twrapper{border-radius:10px;overflow:hidden;}
90 
91 
92 /* media queries */
93 @media(min-width:480px){
94 .twrapper{width:282px;}
95 .twrapper .td{ width:94px;}
96 
97 }
98 @media(min-width:640px){
99 .twrapper{width:360px;}
100 .twrapper .td{width:120px;}
101 
102 }
103 @media(min-width:800px){
104 .twrapper{width:459px;}
105 .twrapper .td{width:153px;}
106 
107 }
108 @media(min-width:1024px){
109 .twrapper{width:582px;}
110 .twrapper .td{width:194px;}
111 
112 }
113 @media(min-width:1184px){
114 .twrapper{width:684px;}
115 .twrapper .td{width:228px;}
116 
117 }
118 @media(min-width:1280px){
119 .twrapper{width:738px;}
120 .twrapper .td{width:246px;}
121 
122 }

der HTML-Code ist recht simple

Source file

01  <div class="twrapper">
02             <div class="ttable">
03               <div>
04                 <div class="tr">
05                   <div id="first" class="th"> Titel 1 </div>
06                   <div class="th"> Titel 2 </div>
07                   <div class="th"> Titel 3 </div>
08                 </div>
09                 <div class="tr">
10                   <div class="td"> Reihe 1 </div>
11                   <div class="td"> Reihe 1 </div>
12                   <div class="td"> Reihe 1 </div>
13                 </div>
14                 <div class="tr">
15                   <div class="td"> Reihe 2 </div>
16                   <div class="td"> Reihe 2 </div>
17                   <div class="td"> Reihe 2 </div>
18                 </div>
19                 <div class="tr">
20                   <div class="td"> Reihe 3 </div>
21                   <div class="td"> Reihe 3 </div>
22                   <div class="td"> Reihe 3 </div>
23                 </div>
24               </div>
25             </div>
26           </div>

Viel Spaß beim Ausprobieren !

wird fortgesetzt...

.
.
 

Tags: CSS, CSS3, HTML5, Programmieren, responsive, Tabelle, webmaster

Verwandte Artikel:

Letzte Änderung des Tests: 2015-12-15 11:44
Autor: pipe

Leser: 5804 (3.98 pro Tag )


Revision: 1.0

Artikel bewerten

bisher bewertet
3.68 (111 ×)

1 2 3 4 5

Kommentar schreiben


Spam Schutz

..