how to make a table responsive in html
how to make a table responsive in html
1 Answer
First of all, you have to Define an HTML Table
and we define it with the <table>
tag.
Then, we know that any table consists of columns and rows, But HTML table is always based on rows, never columns.
so the row is defined with the <tr>
tag.
A table header is defined with the <th>
tag. And by default, the table headings are bold and centred.
A table data/cell is defined with the <td>
tag.
Example:
<table style="width:100%">
<tr>
<th>Country</th>
<th>Capital</th>
<th>continent</th>
</tr>
<tr>
<td>Jordan</td>
<td>Amman</td>
<td>Asia</td>
</tr>
<tr>
<td>Palestine</td>
<td>Al-Quds</td>
<td>Asia</td>
</tr>
</table>
Output:
Country | Capital | continent |
---|---|---|
Jordan | Amman | Asia |
Palestine | Al-Quds | Asia |
But if we have a lot of cells and information we will have a big table, so we want it responsive. so just create a <div>
section and put the <table>
inside it and add this style to the <div>
style="overflow-x:auto;".
Example:
<div style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
<th>Points1</th>
<th>Points2</th>
<th>Points3</th>
<th>Points4</th>
<th>Points5</th>
<th>Points6</th>
<th>Points7</th>
<th>Points8</th>
<th>Points9</th>
</tr>
<tr>
<td>Mohammed</td>
<td>Qandeel</td>
<td>Jordan</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Mikdam</td>
<td>Qandeel</td>
<td>Jordan</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Khaled</td>
<td>Mustafa</td>
<td>Egypt</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
Output:
First Name | Last Name | Country | Points1 | Points2 | Points3 | Points4 | Points5 | Points6 | Points7 | Points8 | Points9 |
---|---|---|---|---|---|---|---|---|---|---|---|
Mohammed | Qandeel | Jordan | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
Mikdam | Qandeel | Jordan | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Khaled | Mustafa | Egypt | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
answer Link