In this blog i'll show how can you make responsive table. To make a table responsive first step is to know "nth-of-type" , that is a selector of css3 you can see that in css as i explain it ( In css - line 50 ), now we will make a table

--Html--

<div>
  <table width="100%" border="1">
    <thead>
      <tr>
        <th>Item Name</th>
        <th>Item Code</th>
      </tr>
    </thead>
    <tr>
      <td>Item 3</td>
      <td>001</td>
    </tr>
    <tr>
      <td>Item 4</td>
      <td>001</td>
    </tr>
    <tr>
      <td>Item 5</td>
      <td>004</td>
    </tr>
  </table>
</div>

After complete table we come on css style sheet here i using css3 selector and for mobile screen i just change table heading text with selector and align all table using position and other . and It will works properly .

--css--

* {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px
}
div {
    width: 600px;
    margin: 0 auto
}
table {
    border-collapse: collapse;
}
td {
    padding: 4px
}
th {
    text-align: left;
    padding: 4px
}
 @media only screen and (max-width : 600px) {
div {
    width: 500px
}
table, thead, tbody, th, td, tr {
    display: block;
}
thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
tr {
    border-bottom: 1px solid #CCC
}
tr:last-child {
    border-bottom: none
}
td {
    border: none;
    position: relative;
    padding-left: 30%;
}
td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
}
/*----CSS3 Selector-----*/
td:nth-of-type(1):before {
    content: "Item Name";
}
td:nth-of-type(2):before {
    content: "Item Code";
}
}