How to Make Responsive Table In AMP HTML Blog

Creating Responsive Table In AMP HTML Blog

Well in this tutorial, I modify the bootstrap-style responsive table with the jquery is simpler and for valid AMP.

And actually this responsive table is not only for AMP blog, but can also be used for Non AMP blog.

For the appearance can be seen in JSfiddle iframe below. To view responsiveness please access this page with your smartphone and check its table.

How to Create Responsive Table in AMP-Based Blog?

If you need a responsive table please follow the steps below:

1. Please save the following CSS in your HTML Blogger editor.

.table-responsive{min-height:.01%;overflow-x:auto}

.table{width:100%;border-collapse:collapse;border-spacing:0}

.table td,.table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-family:sans-serif;font-size:100%;padding:10px;vertical-align:top}

.table tr:nth-child(even) td{background-color:#F0F0E5}

.table th{background-color:#EAE2CF;color:#333;font-size:110%}

.table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF}

.tg-bf{font-weight:700}

.tg-it{font-style:italic}

.tg-left{text-align:left}

.tg-right{text-align:right}

.tg-center{text-align:center}

@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}

.table-responsive>.table{margin-bottom:0}

.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}

}

2. Then to display the responsive table in post, please use HTML table like below in HTML editor mode.

<div class='table-responsive'>

  <table class="table">

    <tr>

      <th colspan="4" class="tg-center tg-bf">RESPONSIVE TABLE</th>

    </tr>

    <tr>

      <td>LOREM</td>

      <td>IPSUM</td>

      <td>NON</td>

      <td>NN</td>

    </tr>

    <tr>

      <td>Ekonomi</td>

      <td>150.000</td>

      <td>5 pcs</td>

      <td>110.000</td>

    </tr>

     <tr>

      <td>Ekonomi</td>

      <td>150.000</td>

      <td>5 pcs</td>

      <td>110.000</td>

    </tr>

      <tr>

      <td>Ekonomi</td>

      <td>150.000</td>

      <td>5 pcs</td>

      <td>110.000</td>

    </tr>

     <tr>

      <td>Ekonomi</td>

      <td>150.000</td>

      <td>5 pcs</td>

      <td>110.000</td>

    </tr>

  </table>

</div>

For class="tg-center tg-bf" please according to need to set the location of the header table.

Note:

• tg-bf for bold
• tg-it for italics
• tg-left to left flat
• tg-right to right flat
• tg-center for center flat

OPEN CODEPEIN HERE
3. Publish or Preview first for the final steps.

Thats all the steps, may be usefull.