How to make a responsive table in HTML

The easiest, popular way to make a responsive table in HTML is to make it horizontally scrollable.

To do so, place the table inside another div with overflow-x:auto.

<div style="overflow-x:auto;">
  <table>
    your table
  </table>
</div>

Example:

Some Value 1 Some Value 2 Some Value 3 Some Value 4 Some Value 5 Some Value 6 Some Value 7 Some Value 8 Some Value 9 Some Value 10 Some Value 11 Some Value 12 Some Value 13 Some Value 14
1 2 3 4 5 6 7 8 9 10 11 12 13 14
1 2 3 4 5 6 7 8 9 10 11 12 13 14
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<div style="overflow-x:auto;">
   <table>
      <th>Some Value 1</th>
      <th>Some Value 2</th>
      <th>Some Value 3</th>
      <th>Some Value 4</th>
      <th>Some Value 5</th>
      <th>Some Value 6</th>
      <th>Some Value 7</th>
      <th>Some Value 8</th>
      <th>Some Value 9</th>
      <th>Some Value 10</th>
      <th>Some Value 11</th>
      <th>Some Value 12</th>
      <th>Some Value 13</th>
      <th>Some Value 14</th>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td>8</td>
         <td>9</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
      </tr>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td>8</td>
         <td>9</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
      </tr>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td>8</td>
         <td>9</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
      </tr>
   </table>
</div>