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

Daidalos June 13, 2019


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

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 ?

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 ?

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

Liens Site
Bootstrap4 Responsive Table - Fixed first column stackoverflow
Can I lock the first column in a Twitter Bootstrap Table? stackoverflow
codepen codepen
Making a Bootstrap table column fit to content stackoverflow
Table mdbootstrap
Make one column fixed with horizontal scroll using Bootstrap? stackoverflow
jsfiddle jsfiddle
Table fixed header and scrollable body stackoverflow
Tables getbootstrap

Licence


Activity


Google Ads