1
Hier header fixiert ist der Code Stift https://codepen.io/shaswat/pen/EbwPNKWie ansprechenden Tisch machen und beide auf dem gleichen HTML-Tabelle
ich eine HTML-Tabelle, die alle Spalten ansprechbar gemacht habe, indem sie wiederholt zu werden und den entsprechenden Zeilenwert angezeigt wenn sein mobiles Display - so das reaktive Teil ist fertig
Jetzt haben Probleme, den Header in dieser HTML-Tabelle beim Scrollen der Tbody fixiert - so tbody kann feste Höhe haben und diese Zeit Scroll-Header sollte behoben werden - gilt nur für die Auflösungen größer als mobile Anzeige --notwendig h ELP in diesem
HTML
<h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header</h3>
<div class='rg-container'>
<div class='rg-content'>
<table class='rg-table'>
<thead>
<tr>
<th class='text '>id </th>
<th class='text '>somcol</th>
<th class='text '>biggger id</th>
<th class='text '>another id</th>
<th class='text '>med col</th>
<th class='text '>med col</th>
<th class='text '>sheet</th>
<th class='text '>sheet</th>
<th class='text '>anotherbigcoloumn</th>
<th class='text '>small</th>
<th class='text '>anotherbigcoloumn</th>
<th class='text '>dateformat</th>
<th class='text '>dateformat</th>
<th class='text '>small col</th>
<th class='text '>dateformat</th>
<th class='text '>averybigcolumnssssss</th>
<th class='text '>mediumclolumnss</th>
</tr>
</thead>
<tbody>
<tr>
<td class='text' data-title='id'>id</td>
<td class='text' data-title='somcol'>somcol</td>
<td class='text' data-title='biggger id'>biggger id</td>
<td class='text' data-title='another id'>another id</td>
<td class='text' data-title='med col'>med col</td>
<td class='text' data-title='med col'>med col</td>
<td class='text' data-title='sheet'>sheet</td>
<td class='text' data-title='sheet'>sheet</td>
<td class='text' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text' data-title='small'>small</td>
<td class='text' data-title='anotherbigcoloumn'>another big coloumn</td>
<td class='text' data-title='dateformat'>date format</td>
<td class='text' data-title='dateformat'>date format</td>
<td class='text' data-title='small col'>small col</td>
<td class='text' data-title='dateformat'>date format</td>
<td class='text' data-title='averybigcolumnssssss'>a very big columnssssss</td>
<td class='text' data-title='mediumclolumnss'>medium clolumnss</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
.rg-container {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
margin: 0;
padding: 1em 0.5em;
color: #222;
}
.rg-header {
margin-bottom: 1em;
text-align: left;
}
.rg-header > * {
display: block;
}
/* table */
table.rg-table {
width: 100%;
margin-bottom: 0.5em;
font-size: 1em;
border-collapse: collapse;
border-spacing: 0;
overflow:scroll;
}
table.rg-table tr {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-align: left;
color: #333;
}
table.rg-table thead {
border-bottom: 3px solid #ddd;
background:black;
}
table.rg-table tr {
border-bottom: 1px solid #ddd;
color: #222;
}
table.rg-table tr.highlight {
background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
background-color: #f6f6f6;
}
table.rg-table th {
font-weight: bold;
padding: 0.35em;
font-size: 0.9em;
color:white;
}
table.rg-table td {
padding: 0.35em;
font-size: 0.9em;
}
table.rg-table .highlight td {
font-weight: bold;
}
table.rg-table th.number, td.number {
text-align: right;
}
/* media queries */
@media screen and (max-width: 800px) {
.rg-container {
max-width: 800px;
margin: 0 auto;
}
table.rg-table {
width: 100%;
}
table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
display: none;
}
table.rg-table thead {
display: none;
}
table.rg-table tbody {
width: 100%;
}
table.rg-table tr, table.rg-table th, table.rg-table td {
display: block;
padding: 0;
}
table.rg-table tr {
border-bottom: none;
margin: 0 0 1em 0;
padding: 0.5em;
}
table.rg-table tr.highlight {
background-color: inherit !important;
}
table.rg-table.zebra tr:nth-child(even) {
background-color: none;
}
table.rg-table.zebra td:nth-child(even) {
background-color: #f6f6f6;
}
table.rg-table tr:nth-child(even) {
background-color: none;
}
table.rg-table td {
padding: 0.5em 0 0.25em 0;
border-bottom: 1px dotted #ccc;
text-align: right;
}
table.rg-table td[data-title]:before {
content: attr(data-title);
font-weight: bold;
display: inline-block;
content: attr(data-title);
float: left;
margin-right: 0.5em;
font-size: 0.95em;
}
table.rg-table td:last-child {
padding-right: 0;
border-bottom: 2px solid #ccc;
}
table.rg-table td:empty {
display: none;
}
table.rg-table .highlight td {
background-color: inherit;
font-weight: normal;
}
Wenn dies im Körper einer E-Mail ist, möchten Sie die Kopfzeile der scrollen Tisch, ja? – scoopzilla
Hier ist ein toller Artikel zum Thema von unseren Freunden bei [E-Mail auf Acid] (https://www.emailonacid.com/blog/article/email-development/what-you-need-to-know-about-css- feste Positionierung in E-Mail). – scoopzilla
dies ist überhaupt nicht für eine E-Mail – Shaswata