Creating Different Responsive Tables in Blogger

{tocify} $title={Table of Contents}

If you are a serious blogger and you want to show your content as a professional blogger then sometimes you have to use a list, nested list, table, responsive layout, interactive posts and more. It depends on what kind of content you have.

In this post, I am explaining how to create a different kind of responsive tables.

Tables are most useful to display the data in a clean and most understandable way. Nowadays, different size smartphones, desktops, and laptops have been using. So we should use responsive tables to display the data.

Creating a Simple Responsive Table:

The simple responsive table is very useful when we have fewer fields and less content.

head	head	head
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text

To display the above table, Use the below code.

<style>

#simple_table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;

}

#simple_table td, #simple_table th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

  border: 1px solid gray;

}

#simple_table tr:nth-child(even) {

  background-color: #dddddd;

}
#simple_table tr > th {
    border: 1px solid gray;
    background: #1b90bb;
    color: #FFF;
}

</style> 

<table id="simple_table">

  <tr>

    <th>head</th>

    <th>head</th>

    <th>head</th>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

</table>

• Copy the above code, go to your post editor and click on the HTML tab.
• Paste the copied code in HTML Editor.
• Click on Preview and see the result.

You can see and edit the above example in JSFiddle.

Creating a Fixed Header Responsive Table:

A fixed header responsive table is very useful when we have fewer fields and large content.

head	head	head
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text

To display the above table, Use the below code.

<style>

#fixed_header_table {

  border-collapse: collapse;

  width: 100%;

}

#fixed_header_table td, #fixed_header_table th {

  text-align: left;

  padding: 8px;

}

#fixed_header_table td{

  border: 1px solid gray;

}

#fixed_header_table tbody tr:nth-child(odd) {

  background-color: #dddddd;

}

#fixed_header_table tbody, #fixed_header_table thead {

    display:block;

    overflow-y: auto;

padding: 1px;

}

#fixed_header_table tbody{

    height:250px;

}

#fixed_header_table thead tr, #fixed_header_table tbody tr {

    display:table;

    width:100%;

    table-layout:fixed;

}

#fixed_header_table thead {

    border: 1px solid gray;

    background: #1b90bb;

color: #FFF;

}

</style>

<table id="fixed_header_table">

  <thead>

  <tr>

<th>head</th>

<th>head</th>

<th>head</th>

  </tr>

  </thead>

  <tbody>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  </tbody>

</table>

• Copy the above code, go to your post editor and click on the HTML tab.
• Paste the copied code in HTML Editor.
• Click on Preview and see the result.

You can see and edit the above example in JSFiddle.

Creating a Fixed Header and Fixed First Column Responsive Table:

A fixed header and Fixed First column responsive table are very useful when we have many fields and large content.

	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text
head	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text	text

To display the above table, Use the below code.

<style>

#fixed_header_column{
  position: relative;
  max-width: 100%;
  height: 300px;
  overflow: scroll;
  word-break:normal;
}

#fixed_header_column table {
  border-collapse: collapse;
}

#fixed_header_column td, #fixed_header_column th {
  padding: 5px;
}

#fixed_header_column thead th {
  position: sticky;
  top: 0px;
  background: #1b90bb;
  color: #FFF;
}

#fixed_header_column thead th:first-child {
  left: 0px;
  z-index: 1;
}

#fixed_header_column tbody th {
  position: sticky;
  left: 0px;
  background: #1b90bb;
  border-right: 1px solid gray;
  color: #FFF;
}
#fixed_header_column tbody tr:nth-child(odd) {
  background-color: #dddddd;
}

</style> 

<div id="fixed_header_column">
<table>
<thead>
<tr>
  <th></th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
  <th>head</th>
</tr>
</thead>
<tbody>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>gt;text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
<tr>
  <th>head</th>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td>text</td>
</tr>
</tbody>
</table>
</div>

• Copy the above code, go to your post editor and click on the HTML tab.
• Paste the copied code in HTML Editor.
• Click on Preview and see the result.

You can see and edit the above example in JSFiddle.

Creating a Multiple View Simple Responsive Table:

To see a different view of this table resize the window.

To display the above table, Use the below code.

<style>
.mv_table #simple_table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.mv_table #simple_table td, .mv_table #simple_table th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  border: 1px solid gray;
}

.mv_table #simple_table tr:nth-child(even) {
  background-color: #dddddd;
}
.mv_table #simple_table tr > th {
    border: 1px solid gray;
    background: #1b90bb;
    color: #FFF;
}
.mv_table .accordion {
 background-color: #eee;
 color: #444;
 cursor: pointer;
 padding: 12px;
 width: 100%;
 text-align: left;
 border: none;
 outline: none;
 transition: 0.4s;
 margin: 2px;
 border-radius: 8px;
}
.mv_table .active, .accordion:hover {
  //background-color: #9fc2cf;
}
.mv_table .panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}
.mv_table .active{
 background-color: #1b90bb;
 color:white;
}
.mv_table .arrow{
 float:right;
}
.mv_table .darrow{
 display:none;
}
.mv_table .accordian_table{
 width: 100%;
}
.mv_table .accordian_table th{
 text-align: left;
}

@media only screen and (max-width: 600px) {
  .mv_table .accordian_content {
 display:block;
  }
  .mv_table #simple_table{
 display:none;
  }
}

@media only screen and (min-width: 600px) {
  .mv_table .accordian_content {
 display:block;
  }
  .mv_table #simple_table{
 display:none;
  }
}
@media only screen and (min-width: 768px) {
  .mv_table .accordian_content {
 display:none;
  }
  .mv_table #simple_table{
 display:table;
  }
} 
</style>

<br />
<div class="mv_table">
<div class="accordian_content">
</div>
<table id="simple_table">
 </table>
</div>
<script>
 (function($) {

  var small_screen_heading = "name";
  var data = [
  {
   id: 001,
   name: "Santhosh Kumar",
   state: "aaa",
   country: "xyz",
   salary: "10,000"
  },
  {
   id: 002,
   name: "Bhaskar Reddy",
   state: "bbb",
   country: "xyz",
   salary: "10,000"
  },
  {
   id: 003,
   name: "Karunakar Kumar",
   state: "ccc",
   country: "pqr",
   salary: "10,000"
  }
  ];
  
   for (var i = 0; i < data.length; i++) {
   
   var accordianhtml = "<button class='accordion'>"+data[i][small_screen_heading]+"<span class='arrow rarrow'>&#8594;</span><span class='arrow darrow'>&#8595;</span></button><div class='panel'><p><table class='accordian_table'>";
   
   
   var table_row = null;
   var table_header = null;
   
   for (var key in data[i]) {
    //for accordian view
    accordianhtml = accordianhtml+"<tr><th>"+key+"</th><td>"+data[i][key]+"</td></tr>";
          
    if(i === 0){
     table_header = table_header+"<th>"+key+"</th>";
    }
    table_row = table_row+"<td>"+data[i][key]+"</td>";
   }
   
   if(i === 0){
    table_header = "<tr>"+table_header+"</tr>";
    $(".mv_table #simple_table").append(table_header);
   }
   
   table_row = "<tr>"+table_row+"</tr>";
   $(".mv_table #simple_table").append(table_row);
     
   accordianhtml = accordianhtml+"</table></p></div>";   
   $(".accordian_content").append(accordianhtml);
  
       }
  $(".accordion").click(function(){
  $(".panel").slideUp();
  $('.rarrow').show();
  $('.darrow').hide(); 
  if(!$(this).hasClass("active")){
   $(".accordion").each(function(){
    $(this).removeClass('active');   
   });
   $(this).addClass('active');
   $(this).next().slideDown();
   $(this).find('.rarrow').hide();
   $(this).find('.darrow').show();
  } else{
   $(".accordion").each(function(){
    $(this).removeClass('active');  
   }); 
  }
  });  
 })(jQuery);
</script>

• Add JQuery Library to your blogger.
• Copy the above code, go to your post editor and click on the HTML tab.
• Paste the copied code in HTML Editor.
• Publish and view the post.

You can see and edit the above example in JSFiddle.

Creating a Simple Responsive Table with combining cells:

When we have the same content in many cells, sometimes we have to convert them into a single cell. Below examples are very useful for converting multiple cells into a single cell.

Example1:

head	head	head
text	text	text
text	text	text
text	text
text	text
text	text
text	text
text	text
text	text	text
text	text	text
text	text	text
text	text	text

To display the above table, Use the below code.

<style>

#simple_table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;

}

#simple_table td, #simple_table th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

  border: 1px solid gray;

}

#simple_table tr:nth-child(even) {

  background-color: #dddddd;

}
#simple_table tr > th {
    border: 1px solid gray;
    background: #1b90bb;
    color: #FFF;
}

</style> 

<table id="simple_table">
  <tr>
    <th>head</th>
    <th>head</th>
    <th>head</th>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td rowspan="6">text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
<!--Deleted td element to be collapsed with rowspan-->
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <!--Deleted td element to be collapsed with rowspan-->
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <!--Deleted td element to be collapsed with rowspan-->
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <!--Deleted td element to be collapsed with rowspan-->
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <!--Deleted td element to be collapsed with rowspan-->
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

• Copy the above code, go to your post editor and click on the HTML tab.
• Paste the copied code in HTML Editor.
• Click on Preview and see the result.

Example2:

head	head	head
text	text	text
text	text
text
text
text
text
text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text
text	text	text

To display the above table, Use the below code.

<style>

#simple_table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;

}

#simple_table td, #simple_table th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

  border: 1px solid gray;

}

#simple_table tr:nth-child(even) {

  background-color: #dddddd;

}

#simple_table tr > th {

    border: 1px solid gray;

    background: #1b90bb;

    color: #FFF;

}

</style>

<table id="simple_table">

  <tr>

    <th>head</th>

    <th>head</th>

    <th>head</th>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td rowspan="6" colspan="2">text</td>

    <!--Deleted td element to be collapsed with rowspan-->

  </tr>

  <tr>

    <td>text</td>

 <!--Deleted td element to be collapsed with rowspan-->

 <!--Deleted td element to be collapsed with rowspan-->

  </tr>

  <tr>

    <td>text</td>

    <!--Deleted td element to be collapsed with rowspan-->

    <!--Deleted td element to be collapsed with rowspan-->

  </tr>

  <tr>

    <td>text</td>

    <!--Deleted td element to be collapsed with rowspan-->

    <!--Deleted td element to be collapsed with rowspan-->

  </tr>

  <tr>

    <td>text</td>

    <!--Deleted td element to be collapsed with rowspan-->

    <!--Deleted td element to be collapsed with rowspan-->

  </tr>

  <tr>

    <td>text</td>

    <!--Deleted td element to be collapsed with rowspan-->

    <!--Deleted td element to be collapsed with rowspan-->

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

  <tr>

    <td>text</td>

    <td>text</td>

    <td>text</td>

  </tr>

</table>

• Copy the above code, go to your post editor and click on the HTML tab.
• Paste the copied code in HTML Editor.
• Click on Preview and see the result.