Beginner's Solution for Responsive Tables

Create a new page in your editor.

Copy and paste the style sheet into the head section of the new page and the html into the body section.

Save it and view in your browser.  Go Back When Done

<style>
table {
  border-collapse: collapse;
  max-width: 100%;
	background: #ffffff;
	margin : 0 auto
}

table tr th, table tr td {
  text-align: left;
  padding: 8px;
}

table tr:nth-child(even) {background: #e7ffe7;}
</style>

<div style="overflow-x: auto;">
<table>
 <thead>
  
    <tr>
      <th>Last Name</th>
      <th>E-ID</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th>Total</th>
    </tr>
 </thead>
 <tbody>
    <tr>
      <td>Smith</td>
      <td>#31</td>
      <td>51</td>
      <td>62</td>
      <td>31</td>
      <td>70</td>
      <td>24</td>
      <td>92</td>
      <td>84</td>
      <td>0</td>
      <td>50</td>
      <td>21</td>
      <td>51</td>
      <td>41</td>
      <td>577</th>
    </tr>
    <tr>
      <td>Jackson</td>
      <td>#42</td>
      <td>15</td>
      <td>20</td>
      <td>7</td>
      <td>11</td>
      <td>25</td>
      <td>17</td>
      <td>0</td>
      <td>31</td>
      <td>21</td>
      <td>14</td>
      <td>22</td>
      <td>11</td>
      <td>194</th>
    </tr>
    <tr>
      <td>Brown</td>
      <td>#53</td>
      <td>67</td>
      <td>63</td>
      <td>56</td>
      <td>71</td>
      <td>0</td>
      <td>72</td>
      <td>63</td>
      <td>68</td>
      <td>81</td>
      <td>56</td>
      <td>71</td>
      <td>53</td>
      <td>721</td>
    </tr>
  </tbody>
</table>
</div>

Go Back When Done