Voici le stylo code https://codepen.io/shaswat/pen/EbwPNK

  1. 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

  2. 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;
}
1
Shaswata 16 nov. 2017 à 01:59

4 réponses

Meilleure réponse

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;
            }
}
0
Shaswata 16 nov. 2017 à 09:35

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.

0
evilReiko 16 nov. 2017 à 07:02

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>
0
mohaa8844 16 nov. 2017 à 02:42

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;
}
0
wazz 16 nov. 2017 à 01:30
47318758