| Viewed 130 times

how to make a table responsive in html

how to make a table responsive in html

HTML
1 Answer
Mikdam Qandeel
Answered
2

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