Create Responsive Table in Mobile Browser

Before Started

You must have knowledge about adding bootstrap files inside HTML head

Definition

Responsive table means that the table will have horizontal scrollbar in small screen

Example

I want to maka a table like image below:

The table will have horizontal scrollbar in mobile browser

Question:

How to make it … ?

Answer:

Create a table_responsive.html and add this code :

<div class="container">

  <div class="table-responsive" >
  <br />
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>No</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
         </tr>
      </thead>
      <tbody>
	   <tr>
          <td>1</td>
          <td>Fahmi</td>
          <td>Basya</td>
          <td>39</td>
          <td>Bogor</td>
          <td>Indonesia</td>
          <td>Male</td>
         </tr>
       </tbody>
    </table>
  </div>
</div>

Explain:

div with table-responsive class will make the table responsive

Thanks for reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *