Créer un tableau html avec un menu horizontal déroulant en fixant la première colonne ?

Published: 13 juin 2019

DMCA.com Protection Status

Exemple de comment créer un tableau avec un menu horizontal déroulant en fixant la première colonne ?

Table des matières

Code source

Un exemple de tableau (inspiré de l'example sur codepen)

Créer un tableau avec un menu horizontal déroulant en fixant la première colonne ?
Créer un tableau avec un menu horizontal déroulant en fixant la première colonne ?

Résultat si on bouge l'ascenseur horizontal vers la droite:

Créer un tableau avec un menu horizontal déroulant en fixant la première colonne ?
Créer un tableau avec un menu horizontal déroulant en fixant la première colonne ?

Voici le code source permettant de reproduire le tableau présenté sur les images:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<style>

.table-scroll {
    position:relative;
    margin:auto;
}
.table-wrap {
    width:100%;
    overflow:auto;
}
.table-scroll table {
    width:100%;
    margin:auto;
    border-collapse:separate;
    border-spacing:0;
}
.table-scroll th, .table-scroll td {
    padding:10px 10px;
    background:#fff;
    white-space:nowrap;
    vertical-align:top;

    font-size: 15px;
    font-family: Yellowtail;    
    color: black;

}

tr  {
   text-align: center;
}


.clone {
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}
.clone th, .clone td {
    visibility:hidden;
}
.clone td, .clone th {
    border-color:transparent
}
.clone tbody th {
    visibility:visible;
}
.clone .fixed-side {
    visibility:visible;
    font-size: 14px;
    font-family: Yellowtail;    
    color: #06a;
}

</style>


</head>
<body>



<div id="table-scroll" class="table-scroll" style='max-width:500px;margin-top: 200px;'>
  <div class="table-wrap">
    <table class="main-table">
      <thead>
        <tr>
          <th class="fixed-side" scope="col">&nbsp;</th>
          <th scope="col">Header 1</th>
          <th scope="col">Header 2</th>
          <th scope="col">Header 3</th>
          <th scope="col">Header 4</th>
          <th scope="col">Header 5</th>
          <th scope="col">Header 6</th>
          <th scope="col">Header 7</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="fixed-side">Product row 1</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 2</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 3</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 4</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 5</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
        <tr>
          <th class="fixed-side">Product row 6</th>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
          <td>3.1415</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
jQuery(document).ready(function() {
   jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   
 });

</script>


</body>

</html>

Références

Image

of