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.
