Hier mal der Ansatz mit Floats:
Code:
/** Hide labels */
[class*="table_mm_"] .label {
display: none;
}
/** Show and format first labels*/
[class*="table_mm_"] tr:first-child .label {
display: block;
font-weight: bold;
background-color: #f3f3f3;
border: 1px solid #e9e9e9;
border-width: 1px 0;
}
/** Make columnes */
[class*="table_mm_"] .field {
width: 14%; /** 100/(Anzahl Spalten) */
float: left;
box-sizing: border-box;
min-height: 1px; /** If there are empty values */
}
/** Fine tune */
[class*="table_mm_"] tr:first-child td {
width: 100%;
}
[class*="table_mm_"] tr:first-child .label {
margin-left: -6px;
padding: 2px 6px 3px;
}
[class*="table_mm_"] tr:first-child .value {
padding: 2px 6px 0 0;
}
[class*="table_mm_"] .value {
padding-right: 6px;
word-wrap: break-word; /** If there are many columnes */
}
[class*="table_mm_"] tr:first-child td:last-child {
padding-top: 19px;
}
[class*="table_mm_"] .field:first-child {
clear: both;
}
Und hier noch einer mit display:table; (nicht ganz ausgearbeitet)
Code:
[class*=table_mm_] td:first-child {
padding: 0 !important;
}
.layout_full {
display: table;
table-layout: fixed;
width: 100%;
}
.item {
display: table-row;
}
.field {
display: table-cell;
word-wrap: break-word;
}
.label {
display: none;
}
tr:first-child .label {
display: block;
font-weight: bold;
background-color: #f3f3f3;
border: 1px solid #e9e9e9;
border-width: 1px 0;
}
.label,
.value {
padding: 2px 6px 3px;
}
ps Schade, dass es hier kein CSS-Syntaxhighlighting gibt.
Lesezeichen