Smothie Table

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
<script src="https://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<table class="scroll">
    <thead>
        <tr>
            <th>Produit</th>
            <th>Référence</th>
            <th>Prix unitaire</th>
            <th>Quantité</th>
            <th>Prix</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Produit 1</td>
            <td>13020500</td>
            <td>5,00 €</td>
            <td>2</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Produit 2</td>
            <td>13020501</td>
            <td>5,00 €</td>
            <td>2</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Produit 3</td>
            <td>13020502</td>
            <td>5,00 €</td>
            <td>2</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Produit 3</td>
            <td>13020502</td>
            <td>5,00 €</td>
            <td>2</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Produit 4</td>
            <td>13020503</td>
            <td>5,00 €</td>
            <td>2</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Produit 5</td>
            <td>13020504</td>
            <td>5,00 €</td>
            <td>2</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Produit 6</td>
            <td>13020505</td>
            <td>5,00 €</td>
            <td>2</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Produit 7</td>
            <td>13020506</td>
            <td>5,00 €</td>
            <td>2</td>
            <td>10,00 €</td>
        </tr>
        <tr>
            <td>Produit 8</td>
            <td>13020507</td>
            <td>5,00 €</td>
           ...

CSS

table.scroll {
  width:100%;
  text-align:center;
}

table.scroll tbody {
  max-height: 150px;
}

.mCSB_inside>.mCSB_container {
    margin-right: 0;
}
.mCSB_scrollTools {
    width: 6px;
}
.mCSB_scrollTools .mCSB_draggerRail {
    width: 6px;
}

table {
 border-collapse:collapse;
 }
th, td {
 border:1px solid black;
 width:20%;
 }
td {
 text-align:center;
 }
tfoot th, tfoot td {
  border:0;
}
tfoot tr {
  border:1px solid black;
}

JavaScript

$(document).ready(function() {
  var $table = $('table.scroll'),
      $thead = $table.find('thead'),
      $tbody = $table.find('tbody'),
      $tfoot = $table.find('tfoot'),
      $headCells = $thead.find('tr:first').children(),
      colWidth;

  // Adjust the width of thead cells when window resizes
  $(window).resize(function() {
      // Get the tbody columns width array
      colWidth = $headCells.map(function() {
          return $(this).width();
      }).get();

      // Set the width of thead columns
      $thead.find('tr').children().each(function(i, v) {
          $(v).width(colWidth[i]);
      });

      // Set the width of tbody columns
      $tbody.find('tr').children().each(function(i, v) {
          $(v).width(colWidth[i]);
      });

      // Set the width of tbody columns
      $tfoot.find('tr').children().each(function(i, v) {
          $(v).width(colWidth[i]);
      });

      $thead.css('display', 'block');
      $tbody.css('display', 'block');
      $tfoot.css('display', 'block');
  }).resize();

  $tbody.mCustomScrollbar();
});