Horizontal scroll in table

by Ivan Karkachev

HTML

<table class="splits-options">
  <thead>
    <tr>
      <th>Модель сплит-системы</th>
      <th>Гарантия</th>
      <th>Страна сборки</th>
      <th>Инверторное управление</th>
      <th>Рекомендуемая площадь, кв.м</th>
      <th>Класс энергоэффективности</th>
      <th>Режим работы</th>
      <th>Производительность (охлаждение), кВт</th>
      <th>Наличие и цены</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>BSE-07HN1</th>
      <td>3 года</td>
      <td>Китай</td>
      <td id="alt-no-inverter">&nbsp;</td>
      <td>20</td>
      <td>А</td>
      <td>охлаждение и обогрев</td>
      <td>2,1</td>
      <td class="cost">&nbsp;</td>
    </tr>
    <tr>
      <th>BSE-09HN1</th>
      <td>3 года</td>
      <td>Китай</td>
      <td id="alt-no-inverter">&nbsp;</td>
      <td>25</td>
      <td>А</td>
      <td>охлаждение и обогрев</td>
      <td>2,6</td>
      <td class="cost">&nbsp;</td>
    </tr>
    <tr>
      <th>BSE-12HN1</th>
      <td>3 года</td>
      <td>Китай</td>
      <td id="alt-no-inverter">&nbsp;</td>
      <td>35</td>
      <td>А</td>
      <td>охлаждение и обогрев</td>
      <td>3,2</td>
      <td class="cost">&nbsp;</td>
    </tr>
    <tr>
      <th>BSE-18HN1</th>
      <td>3 года</td>
      <td>Китай</td>
      <td id="alt-no-inverter">&nbsp;</td>
      <td>50</td>
      <td>А</td>
      <td>охлаждение и обогрев</td>
      <td>5</td>
      <td class="cost">&nbsp;</td>
    </tr>
    <tr>
      <th>BSE-24HN1</th>
      <td>3 года</td>
      <td>Китай</td>
      <td id="alt-no-inverter">&nbsp;</td>
      <td>70</td>
      <td>А</td>
      <td>охлаждение и обогрев</td>
      <td>6,8</td>
      <td class="cost">&nbsp;</td>
    </tr>
  </tbody>
</table>

CSS

* {
  box-sizing: border-box;
}
/* table options 240px min */

@media all and (min-width:240px) {
  .splits-options {
    display: block;
    width: 100%;
  }
  .splits-options * {
    display: block;
    font-family: 'Open sans', Arial;
    font-size: .9em;
  }
  .splits-options thead {
    float: left;
    max-width: 45%;
  }
   .splits-options thead th {
    border-bottom: 1px dotted black;
    text-align: left;
    line-height: 1.1em;
  }
  .splits-options tbody {
    width:55%;
    overflow-x: scroll;
    text-align: center;
    white-space: nowrap;
    float: left;
  }
  .splits-options tbody tr {
    /*float: left;*/
    display: inline-block;
  }
  .splits-options tbody tr th {
    border-bottom: 1px dotted black;
    line-height: 1.1em;
  }
  .splits-options tbody tr td {
    border-bottom: 1px dotted black;
    line-height: 1.1em;
  }
  #alt-no-inverter {
    background: url('http://i12.pixs.ru/storage/5/8/4/iconxpng_1774263_24742584.png') no-repeat 50% 50%;
	  background-color:#FFFEEF;
    line-height: 1.1em;
  }
}
/* end table options 240px min */
/*
@media all and (min-width:768px) {
  .splits-options {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
    text-align: center;
  }
  .splits-options thead {
    margin: 0;
    padding: 0;
  }
  .splits-options td {
    min-width: 100px;
    height: 20px;
    border-bottom: 1px dotted #ddd;
    font-family: Arial;
    font-size: 0.7em;
    text-align: center;
    padding: 0.8%;
    line-height: .9;
    background: #FFFEEF;
  }
  .splits-options thead th {
    background-color: #DFFAFF;
    font-family: Arial;
    font-size: 0.8em;
    padding: 15px 2px;
    border: 1px solid #fff;
    border-bottom: 2px solid #ddd;
    color: #666;
  }
  .splits-options tbody th {
    min-width: 165px;
    border-bottom: 1px dotted #ddd;
    font-family: Arial;
    font-size: 0.7em;
    text-align: center;
    background-color: #FFFEEF;
  }
  .splits-options tbody tr td:last-child {
    padding: 0;
   ...