Voici le stylo code https://codepen.io/shaswat/pen/EbwPNK
J'ai rendu un tableau html réactif en faisant répéter toutes les colonnes et en affichant la valeur de la ligne correspondante lorsque son affichage mobile - donc la partie réactive est terminée
J'ai maintenant du mal à fixer l'en-tête dans ce tableau html tout en faisant défiler le corps - donc le corps peut avoir une hauteur fixe et cet en-tête de défilement temporel doit être fixe - applicable uniquement pour les résolutions supérieures à l'affichage mobile - besoin d'aide pour cela
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;
}
4 réponses
Après essais et erreurs, j'ai créé cette table html. qui est réactif et la tête de table est fixe
https://codepen.io/shaswat/pen/bYoagm
HTML
<div class="gridContainer"><h1 class='deepshadow'>Table Fixed header Plus Responsive table</h1>
<div class="tableWrapper">
<div class="tableWrapper__head">
<table class="responsiveTableLayout">
<thead>
<tr>
<th>small_1</th>
<th>small_2</th>
<th>Medium_1</th>
<th>Medium_2</th>
<th>Medium_3</th>
<th>Medium_4</th>
<th>Medium_5</th>
<th>BigColumn_1</th>
<th>BigColumn_2</th>
</tr>
</thead>
</table>
</div>
<div class="tableWrapper__body">
<table class="responsiveTableLayout">
<tbody>
<tr>
<td data-title='Small_2'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
<tr>
<td data-title='Small_1'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
<tr>
<td data-title='Small_2'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
<tr>
<td data-title='Small_2'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
<tr>
<td data-title='Small_2'>1</td>
<td data-title='Small_2'>1</td>
<td data-title='Medium_1'>Some values</td>
<td data-title='Medium_2'>Some values</td>
<td data-title='Medium_3'>Some values</td>
<td data-title='Medium_4'>Some values</td>
<td data-title='Medium_5'>Some values</td>
<td data-title='BigColumn_1'>Big Value</td>
<td data-title='BigColumn_2'>Big Value</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 20px;
padding: 12px 12px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
h1.deepshadow {
color: #e0dfdc;
background-color: #333;
letter-spacing: .1em;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 1px 0 #2c2c2c, 0 2px 0 #2a2a2a, 0 2px 0 #282828, 0 2px 0 #262626, 0 2px 0 #242424, 0 2px 0 #222, 0 4px 0 #202020, 0 4px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
background: white;
}
td, th {
border: 1px solid lightgray;
padding: 2px;
text-align: left;
}
td:first-child {
width: 75px;
}
td:nth-child(2) {
width: 75px;
}
td:last-child {
text-align: right;
width: 120px;
}
th:first-child {
width: 75px;
}
th:nth-child(2) {
width: 75px;
}
th:last-child {
text-align: right;
width: 135px;
}
th {
background: #333;
color: white;
text-transform: uppercase;
font-weight: normal;
height:30px;
}
table tr:first-child td {
border-top: none;
}
.gridContainer {
background: #ccc;
width: 100%;
padding: 4px;
box-sizing: border-box;
}
.tableWrapper {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.tableWrapper__head{
}
.tableWrapper__body {
max-height :300px;
overflow-y: scroll;
}
/* media queries */
@media screen and (max-width: 1000px) {
.gridContainer {
max-width: 1000px;
margin: 0 auto;
}
table.responsiveTableLayout {
width: 100%;
}
table.responsiveTableLayout thead {
display: none;
}
table.responsiveTableLayout tbody {
width: 100%;
}
table.responsiveTableLayout tr, table.responsiveTableLayout th, table.responsiveTableLayout td {
display: block;
padding: 0;
}
table.responsiveTableLayout th:nth-child(n), table.responsiveTableLayout td:nth-child(n) {
width:auto;
}
table.responsiveTableLayout tr {
border-bottom: none;
margin: 0 0 10px 0;
/*padding: 1px;*/
}
table.responsiveTableLayout td {
/*padding: 4px 0 4px 0;*/
border-bottom: 1px dotted #ccc;
text-align: right;
}
table.responsiveTableLayout td[data-title]:before {
content: attr(data-title);
font-weight: bold;
display: inline-block;
content: attr(data-title);
float: left;
color:teal;
/*margin-right: 0.5em;
font-size: 0.95em;*/
}
table.responsiveTableLayout td:last-child {
padding-right: 0;
padding-bottom:5px;
border-bottom: 2px solid #ccc;
}
table.responsiveTableLayout td:empty {
display: none;
}
}
Si vous recherchez une solution CSS pure (sans JS) + et que les cellules de tableau ont une largeur dynamique + et que vous souhaitez avoir un en-tête fixe = impossible (malheureusement).
Soit vous fixez la largeur des cellules, soit utilisez Javascript / jQuery pour changer la largeur de l'en-tête lors du redimensionnement de la fenêtre, ou renoncez à avoir un en-tête fixe.
Vous allez très bien mais je pense que vous avez manqué quelque chose comme:
vous devez mettre le tout dans un div (conteneur), et bien sûr donner une taille fixe au conteneur.
l'en-tête et le contenu doivent être séparés par des divs et des tables.
vous devez mettre (display: flex; flex-direction: column; height: 100%;) dans la classe de contenant div (des deux tables, rg-container dans votre code)
vous devez également mettre (overflow-y: scroll;) dans la classe du conteneur div de la deuxième table.
Votre code sera donc comme ceci:
.rg-container {
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
margin: 0;
padding: 1em 0.5em;
color: #222;
display: flex;
flex-direction: column;
height: 100%;
}
.container {
background: tan;
width: 100%;
padding: 4px;
height: 300px;
box-sizing: border-box;
}
.rg-header {
margin-bottom: 1em;
text-align: left;
}
.rg-body{overflow-y: scroll;}
.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;
}
}
<h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header</h3>
<div class="container">
<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>
</table>
</div>
<div class="rg-body">
<table>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
</div>
Je ne sais pas si c'est ce que vous recherchez. J'ai fait une table séparée juste pour la tête. (Ce n'est pas pour mobile, n'est-ce pas?) C'est délicat car vous devrez probablement définir des largeurs exactes pour toutes les colonnes. https://codepen.io/wazz/pen/POJmzr?editors=1100.
<h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header</h3>
<div class='rg-container'>
<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 '>another big coloumn</th>
<th class='text '>small</th>
<th class='text '>another big coloumn</th>
<th class='text '>date format</th>
<th class='text '>date format</th>
<th class='text '>small col</th>
<th class='text '>date format</th>
<th class='text '>a very big columnssssss</th>
<th class='text '>medium clolumnss</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class='rg-content'>
<table class='rg-table'>
<tbody>
<tr class=''>
<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='another big coloumn'>another big coloumn</td>
<td class='text ' data-title='small'>small</td>
<td class='text ' data-title='another big coloumn'>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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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>
<tr class=''>
<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;
color: #222;
}
.rg-content {
height: 300px;
overflow: scroll;
}
.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;
border:1px solid #ccc;
}
table.rg-table td {
padding: 0.35em;
font-size: 0.9em;
border:1px solid #ccc;
}
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;
}
Questions connexes
De nouvelles questions
jquery
jQuery est une bibliothèque JavaScript, pensez également à ajouter la balise JavaScript. jQuery est une bibliothèque JavaScript multi-navigateur populaire qui facilite la traversée du Document Object Model (DOM), la gestion des événements, les animations et les interactions AJAX en minimisant les écarts entre les navigateurs. Une question marquée jQuery doit être liée à jQuery, donc jQuery doit être utilisée par le code en question et au moins les éléments liés à l'utilisation de jQuery doivent être dans la question.