-131 Removals
+43 Additions

Created by:phpboost

1/* -------------------------------------- 1/* --------------------------------------
2 table.css 2 table.css
3Contient les elements pour l'affichage des tableaux HTML et responsive. 3Contient les elements pour l'affichage des tableaux HTML et responsive.
4 - Affichage des tableaux basic 4 - Affichage des tableaux basic
5 - Table responsive basictable.js 5 - Table responsive basictable.js
6--------------------------------------*/ 6-------------------------------------- */
7
8 7
9/* -- Affichage des tableaux basic -- */ 8/* -- Affichage des tableaux basic -- */
10/* --------------------------------- */ 9/* ---------------------------------- */
11table { 10table {
12 margin: 8px 0; 11 margin: 0.618em 0;
13 padding: 0; 12 padding: 0;
14 width: 100%; 13 width: 100%;
15 border-spacing: 0; 14 border-spacing: 0;
15 border-width: 1px;
16 border-style: solid;
17 border-color: transparent;
16} 18}
17 19
18/* --- Entete du tableau --- */ 20/* --- Entete du tableau --- */
19table caption { 21table caption {
20 margin: 5px 0 5px 20px; 22 margin: 0.456em 0 0.456em 1.482em;
21 border-bottom: 1px solid #DDDDDD; 23 border-width: 0 0 1px;
22 color: #777777; 24 border-style: solid;
23 font-size: 13px; 25 border-color: transparent;
26 font-size: 0.8em;
24 text-align: left; 27 text-align: left;
25} 28}
26 29
27table thead th, 30table thead th,
28.table-head { 31.table-head {
29 padding: 8px; 32 padding: 0.228em;
30 background-color: #366493; 33 font-size: 0.9em;
31 color: #F1F1F1;
32 font-size: 1.1em;
33 text-align: center; 34 text-align: center;
34 font-weight: normal; 35 font-weight: normal;
35} 36}
36 37
37table thead th a { color: #EEEEEE; }
38table thead th a:hover { color: #FFFFFF; }
39
40/* --- Contenu du tableau --- */ 38/* --- Contenu du tableau --- */
41table tbody td, 39table tbody td,
42.table-element-container { 40.table-element-container {
43 padding: 8px; 41 padding: 0.228em;
44 background-color: #F1F1F1; 42 font-size: 0.9em;
43 text-align: center;
44 border-width: 0 0 1px;
45 border-style: solid; 45 border-style: solid;
46 border-color: #DDDDDD; 46 border-color: transparent;
47 border-width: 1px 0 0 1px;
48 color: #777777;
49 text-align: center;
50} 47}
51 48
52.table-element-container a { 49table.bt tbody tr td {
53 color: #777777; 50 border-bottom-width: 0;
54} 51}
55 52
56tr:nth-child(even) td { 53table.bt tbody tr td:last-child {
57 background-color: #FAFAFA; 54 border-width: 0 0 1px;
58}
59
60table tbody tr:last-child td {
61 border-bottom: 1px solid #DDDDDD;
62}
63
64table.bt tbody tr:last-child td {
65 border-bottom: none;
66}
67
68table.bt tbody tr:last-child td:last-child {
69 border-bottom: 1px solid #DDDDDD;
70}
71
72table tbody tr td:last-child {
73 border-right: 1px solid #DDDDDD;
74}
75
76table tbody tr.no-separator td {
77 border-top: none;
78}
79
80table tbody tr td.no-separator {
81 border-left: none;
82}
83
84table tbody tr td.no-separator:first-child {
85 border-left: 1px solid #DDDDDD;
86} 55}
87 56
88/* --- Pied de tableau --- */ 57/* --- Pied de tableau --- */
89table tfoot tr th { 58table tfoot tr td {
90 padding: 8px; 59 padding: 0.228em;
91 background-color: #F0F0F0; 60 font-size: 0.9em;
92 border-bottom: 1px solid #DDDDDD;
93 color: #AAAAAA;
94}
95
96table tfoot tr th:first-child {
97 border-left: 1px solid #DDDDDD;
98} 61}
99 62
100table tfoot tr th:last-child { 63table tfoot tr td:only-child {
101 border-right: 1px solid #DDDDDD;
102}
103
104table tfoot tr th:only-child {
105 text-align: right; 64 text-align: right;
106} 65}
107 66
108table tfoot tr th * { 67table tfoot tr td * {
109 vertical-align: middle; 68 vertical-align: middle;
110} 69}
111 70
112table tfoot tr th a { 71table tfoot tr td select {
113 color: #676A74; 72 padding: 0.1618 0.309em;
114} 73}
115 74
116table tfoot tr th select { 75@media (min-width: 769px) {
117 padding: 2px 5px; 76 table thead th,
77 table tbody td,
78 table tfoot tr td {
79 padding: 0.309em;
80 font-size: 1em;
81 }
118} 82}
119 83
120/* --- Patch thead tableaux formates --- */ 84/* --- Patch thead tableaux formates --- */
121table.formatter-table th.formatter-table-head { 85table.formatter-table th.formatter-table-head {
122 padding: 8px; 86 padding: 0.618em;
123 background-color: #444444; 87 font-size: 1.482em;
124 color: #F1F1F1;
125 font-size: 1.4em;
126 text-align: center; 88 text-align: center;
127 font-weight: normal; 89 font-weight: normal;
128} 90}
129 91
130table.formatter-table th.formatter-table-head a { color: #F1F1F1; }
131table.formatter-table th.formatter-table-head a:hover { color: #FAFAFA; }
132
133table.formatter-table th.formatter-table-head p { 92table.formatter-table th.formatter-table-head p {
134 margin-bottom: 0; 93 margin-bottom: 0;
135} 94}
136 95
137/* --- Taille des colonnes --- */ 96/* --- Taille des colonnes --- */
138.col-smaller { width: 3em; } 97.col-smaller { width: 3em; }
139.col-small { width: 6em; } 98.col-small { width: 6em; }
140.col-large { width: 9em; } 99.col-large { width: 9em; }
141.col-larger { width: 12em; } 100.col-larger { width: 12em; }
142.col-xlarge { width: 15em; } 101.col-xlarge { width: 15em; }
143 102
144/* --- mini tableaux --- */
145table.mini th,
146table.mini td {
147 padding: 3px 1px;
148 font-size: 11px;
149}
150
151@media (max-width: 768px) {
152 table.mini th,
153 table.mini td {
154 padding: 7px 1px;
155 }
156}
157
158table.mini th a,
159table.mini td a {
160 font-size: 11px;
161}
162
163/* --- Pagination footer tableaux --- */
164table tfoot nav.pagination a {
165 color: #777777;
166 text-decoration: none;
167 padding: 3px 3px;
168
169}
170
171table tfoot nav.pagination a span.current-page {
172 color: #555555;
173 text-decoration: none;
174}
175
176/* --- Affichage des tableaux responsive sur les petits ecrans --- */
177@media (max-width: 768px) {
178 table thead th,
179 table tbody td,
180 table tfoot tr th {
181 padding: 4px;
182 font-size: 0.9em;
183 }
184}
185
186 103
187/* -- Table responsive basictable.js -- */ 104/* -- Table responsive basictable.js -- */
188/* ------------------------------------ */ 105/* ------------------------------------ */
189table.bt thead th { 106table.bt thead th {
190 display: none; 107 display: none;
191} 108}
192 109
193table.bt thead th:first-child{ 110table.bt thead th:first-child{
194 display: block; 111 display: block;
195} 112}
196 113
197table.bt tbody td { 114table.bt tbody td {
198 display: block; 115 display: block;
199 width: 100%; 116 width: 100%;
200 border-right: 1px solid #DDDDDD;
201 text-align: left; 117 text-align: left;
202 vertical-align: top; 118 vertical-align: top;
203} 119}
204 120
205table.bt tbody td.no-separator {
206 border-left: 1px solid #DDDDDD;
207}
208
209table.bt tbody td:before { 121table.bt tbody td:before {
210 display: inline-block; 122 display: inline-block;
211 width: 35%; 123 width: 35%;
212 content: attr(data-th) " "; 124 content: attr(data-th) " ";
213 font-weight: bold; 125 font-weight: bold;
214} 126}
215 127
216table.bt tbody td.bt-hide { 128table.bt tbody td.bt-hide {
217 display: none; 129 display: none;
218} 130}
219 131
220table.bt tbody td .bt-content { 132table.bt tbody td .bt-content {
221 display: inline-block; 133 display: inline-block;
222 padding-left: 6px; 134 padding-left: 0.309em;
223 max-width: 100%; 135 max-width: 100%;
224 vertical-align: top; 136 vertical-align: top;
225} 137}
226 138
227.bt-wrapper.active { 139.bt-wrapper.active {
228 max-height: 310px; 140 max-height: 310px;
229 overflow: auto; 141 overflow: auto;
230 -webkit-overflow-scrolling: touch; 142 -webkit-overflow-scrolling: touch;
231} 143}
Editor
Original Text
Changed Text
Recommended videos