Handicap Slider

by Charles Butler

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/mCSB_buttons.png"></script>
<div id="content" class="mCustomScrollbar" data-mcs-theme="dark">
  <table class="table1">
    <thead>
      <tr>
        <th></th>
        <th scope="col" abbr="Race 1">Race 1</th>
        <th scope="col" abbr="Race 2">Race 2</th>
        <th scope="col" abbr="Race 3">Race 3</th>
        <th scope="col" abbr="Race 4">Race 4</th>
        <th scope="col" abbr="Race 4">Race 5</th>
        <th scope="col" abbr="Race 4">Race 6</th>
        <th scope="col" abbr="Race 4">Race 7</th>
        <th scope="col" abbr="Race 4">Race 8</th>
        <th scope="col" abbr="Race 4">Race 9</th>
        <th scope="col" abbr="Race 4">Race 10</th>
        <th scope="col" abbr="Race 4">Race 11</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">A.Mormino</th>
        <td>1, 3, 2</td>
        <td>7, 2, 3</td>
        <td>1, 3, 4</td>
        <td>4, 8, 2</td>
        <td>1, 3, 2</td>
        <td>7, 2, 3</td>
        <td>1, 3, 4</td>
        <td>4, 8, 2</td>
        <td>7, 2, 3</td>
        <td>1, 3, 4</td>
        <td>4, 8, 2</td>
      </tr>
      <tr>
        <th scope="row">S.Merrow</th>
        <td>1, 3, 2</td>
        <td>7, 2, 3</td>
        <td>1, 3, 4</td>
        <td>4, 8, 2</td>
        <td>1, 3, 2</td>
        <td>7, 2, 3</td>
        <td>1, 3, 4</td>
        <td>4, 8, 2</td>
        <td>7, 2, 3</td>
        <td>1, 3, 4</td>
        <td>4, 8, 2</td>
      </tr>
    </tbody>
  </table>

</div>

CSS

#content {
  max-width: 290px;
}


/* Table 1 Style */

table.table1 {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4em;
  font-style: normal;
  border-collapse: separate;
  white-space: nowrap;
}

.table1 thead th {
  font-size: 11px;
  padding: 0px 7px;
  color: #fff;
  text-shadow: 1px 1px 1px #333;
  border: 1px solid #FFF;
  background-color: #004646;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius: 5px 5px 0px 0px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.table1 thead th:empty {
  background: transparent;
  border: none;
}

.table1 tbody th {
  font-size: 11px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #333;
  background-color: #004646;
  border-right: 3px solid #004646;
  padding: 0px 7px;
  -moz-border-radius: 5px 0px 0px 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.table1 tfoot td {
  color: #9CD009;
  font-size: 32px;
  text-align: center;
  padding: 10px 0px;
  text-shadow: 1px 1px 1px #444;
}

.table1 tfoot th {
  color: #666;
}

.table1 tbody td {
  font-size: 11px;
  padding: 7px;
  text-align: center;
  background-color: #efefef;
  border: 1px solid #FFF;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #666;
  text-shadow: 1px 1px 1px #fff;
}

.table1 tbody span.check::before {
  content: url(../images/check0.png)
}

JavaScript

$("div#content").mCustomScrollbar({
  axis: "x" // horizontal scrollbar
});