Вариант первый

На маленьких экранах таблица сохраняет пропорции, появляется горизонтальная прокрутка. Включаем адаптивный дизайн "CTRL+SHIFT+M":
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9
Ячейка 10 Ячейка 11 Ячейка 12


HTML:
<div class="table">
  <table>
    <thead>
      <tr>
        <th>Заголовок 1</th>
        <th>Заголовок 2</th>
        <th>Заголовок 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
        <td>Ячейка 3</td>
      </tr>
      <tr>
        <td>Ячейка 4</td>
        <td>Ячейка 5</td>
        <td>Ячейка 6</td>
      </tr>
      <tr>
        <td>Ячейка 7</td>
        <td>Ячейка 8</td>
        <td>Ячейка 9</td>
      </tr>
      <tr>
        <td>Ячейка 10</td>
        <td>Ячейка 11</td>
        <td>Ячейка 12</td>
      </tr>
    </tbody>
  </table>
</div>
CSS:
<style>
.table {
    overflow-x:auto
}
    
table {
    width: 100%;
    border-collapse: collapse;
    margin:20px 0;
    border: 1px solid #d9d9d9
}

thead {
    text-transform: uppercase;
    text-align: left;
    background: #f2f2f2
}
    
tbody tr:nth-child(even) {
    background: hsl(0, 0%, 87%)
}

tbody tr:hover {
	background: #fff;
}

th, td {
    padding: 10px;
    min-width: 200px
}

th {
    font-weight: 500;
    font-size: 90%
}
</style>

Вариант второй

На маленьких экранах таблица трансформируется в блоки, которые идут друг под другом. Включаем адаптивный дизайн "CTRL+SHIFT+M". При ширине экрана 600px произойдет трансформация:
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9
Ячейка 10 Ячейка 11 Ячейка 12


HTML:
<table>
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
            <th>Заголовок 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Заголовок 1">Ячейка 1</td>
            <td data-label="Заголовок 2">Ячейка 2</td>
            <td data-label="Заголовок 3">Ячейка 3</td>
        </tr>
        <tr>
            <td data-label="Заголовок 1">Ячейка 4</td>
            <td data-label="Заголовок 2">Ячейка 5</td>
            <td data-label="Заголовок 3">Ячейка 6</td>
        </tr>
        <tr>
            <td data-label="Заголовок 1">Ячейка 7</td>
            <td data-label="Заголовок 2">Ячейка 8</td>
            <td data-label="Заголовок 3">Ячейка 9</td>
        </tr>
        <tr>
            <td data-label="Заголовок 1">Ячейка 10</td>
            <td data-label="Заголовок 2">Ячейка 11</td>
            <td data-label="Заголовок 3">Ячейка 12</td>
        </tr>
    </tbody>
</table>
CSS:
<style>
    table {
	    width: 100%;
	    table-layout: fixed;
	    border-collapse: collapse;
            margin:20px 0;
	    border: 1px solid #d9d9d9
    }

    thead {
        text-transform: uppercase;
        text-align: left;
        background: #f2f2f2
    }
    
    tbody tr:nth-child(even) {
        background: hsl(0, 0%, 87%)
    }

    th, td {
	    padding: 10px;
	    min-width: 200px
    }

    th {
        font-weight: 500;
        font-size: 90%
    }
    
@media (max-width: 600px) {
    table {
        border: none
    }

    thead {
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px
    }
  
    tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #d9d9d9
    }

    tbody tr:nth-child(even) {
        background: none
    }

    td {
        border-bottom: 1px solid #d9d9d9;
        display: block;
        text-align: right
    }
    
    td:before {
        content: attr(data-label);
        float: left;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 90%;
        margin-right: 10px
    }
    
    td:last-child {
        border-bottom: 0
    }
}
</style>