Адаптивная таблица CSS для table

Поисковики ругаются что table не адавтивный а таблицы делать через div лень. Поэтому решение обернуть таблицу в div и прописать класс.

Разметка HTML

<div class="table-wrap">
  <table class="table-1">
    <tr>
      <th>Фамилия</th>
      <th>Имя</th>
      <th>Отчество</th>
      <th>Дата рождения</th>
      <th>Пол</th>
      <th>Страна</th>
      <th>Паспорт</th>
      <th>Телефон</th>
    </tr>
    <tr>
      <td>Иванов</td>
      <td>Иван</td>
      <td>Иванович</td>
      <td>18.08.1995</td>
      <td>Мужской</td>
      <td>Россия</td>
      <td>589047</td>
      <td>12345678</td>
    </tr>
    <tr>
      <td>Джонн</td>
      <td>Смитт</td>
      <td>Олегович</td>
      <td>18.08.1980</td>
      <td>Мужской</td>
      <td>Англия</td>
      <td>789047</td>
      <td>81324567</td>
    </tr>
    <tr>
      <td>Ковалева</td>
      <td>Екатерина</td>
      <td>Дмитриевна</td>
      <td>18.08.19680</td>
      <td>Женский</td>
      <td>Казахстан</td>
      <td>289047</td>
      <td>12357458</td>
    </tr>
  </table>
</div>

Стили CSS

.table-wrap{
	overflow-x:auto;
}	
table.table-1 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table.table-1 tr {
	background-color: #f8f8f8;
}
table.table-1 th, table.table-1 td {
	text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}

table.table-1 th{
	font-weight: bold;
}