How to make a responsive table using css
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--
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--
--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>
- ........
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 {