How to make Html table responsive | Making a responsive table in html

by

Lean how to make responsive tables in HTML

Making a responsive table is easy now.HTML has provided an attribute called style that is used to give style to an HTML element so you can you CSS concepts to make the table responsive and you can use both inline and external CSS. There is a property called overflow-x  in css, and you need to give value auto so the following is the full example of making an html table responsive.

Example

 

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Your First Name</th>
      <th>Your Last Name</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 6</th>
      <th>Col 7</th>
      <th>Col 8</th>
      <th>Col 9</th>
      <th>Col 10</th>
    </tr>
    <tr>
      <td>Ram</td>
      <td>Prakash</td>
      <td>50</td>
      <td>30</td>
      <td>50</td>
      <td>50</td>
      <td>70</td>
      <td>50</td>
      <td>50</td>
      <td>10</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Kamla</td>
      <td>Vati</td>
      <td>94</td>
      <td>94</td>
      <td>54</td>
      <td>94</td>
      <td>94</td>
      <td>64</td>
      <td>94</td>
      <td>14</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Hari</td>
      <td>Singh</td>
      <td>67</td>
      <td>47</td>
      <td>67</td>
      <td>67</td>
      <td>17</td>
      <td>67</td>
      <td>67</td>
      <td>27</td>
      <td>87</td>
      <td>67</td>
    </tr>
  </table>
</div>

Output

Your First Name Your Last Name Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 Col 9 Col 10
Ram Prakash 50 30 50 50 70 50 50 10 50 50
Kamla Vati 94 94 54 94 94 64 94 14 94 94
Hari Singh 67 47 67 67 17 67 67 27 87 67

If this table will be accessed on a large screen such as a desktop or laptop, it will not show a horizontal scroll on the screen. It will show scrolls on-screen such as mobile or any other small screen.

Leave a Comment