.tabelle { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; font-size: 17px; color: #555; background: transparent; } .tabelle th, .tabelle td { border: none !important; box-shadow: none !important; padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.45; } .tabelle tr:first-child, .tabelle tr:first-child th { background: #35a8db !important; color: #fff !important; } .tabelle tr:first-child th { font-weight: 700; padding-top: 12px; padding-bottom: 12px; } .tabelle tr:nth-child(even):not(:first-child) { background: #f5fbfe; } .tabelle tr:nth-child(odd):not(:first-child) { background: #ebf7fc; } .tabelle caption { text-align: center; font-size: 22px; font-weight: 700; color: #444; margin-bottom: 14px; } @media (max-width: 600px) { .tabelle.tabelle, .tabelle.tabelle tbody, .tabelle.tabelle tr, .tabelle.tabelle td, .tabelle.tabelle th { display: block !important; width: 100% !important; } .tabelle.tabelle tr:first-child { display: none !important; } .tabelle.tabelle td { text-align: left !important; padding: 6px 6px 6px 45% !important; position: relative !important; border-bottom: 1px solid #ddd !important; box-sizing: border-box !important; } .tabelle.tabelle td:before { content: attr(data-label) !important; position: absolute !important; left: 6px !important; top: 6px !important; width: 40% !important; font-weight: bold !important; } }