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--

1. <div>
2. <table width="100%" border="1">
3. <thead>
4. <tr>
5. <th>Item Name</th>
6. <th>Item Code</th>
7. </tr>
8. </thead>
9. <tr>
10. <td>Item 3</td>
11. <td>001</td>
12. </tr>
13. <tr>
14. <td>Item 4</td>
15. <td>001</td>
16. </tr>
17. <tr>
18. <td>Item 5</td>
19. <td>004</td>
20. </tr>
21. </table>
22. </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--

1. * {
2. font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
3. font-size: 14px
4. }
5. div {
6. width: 600px;
7. margin: 0 auto
8. }
9. table {
10. border-collapse: collapse;
11. }
12. td {
13. padding: 4px
14. }
15. th {
16. text-align: left;
17. padding: 4px
18. }
19. @media only screen and (max-width : 600px) {
20. div {
21. width: 500px
22. }
23. table, thead, tbody, th, td, tr {
24. display: block;
25. }
26. thead tr {
27. position: absolute;
28. top: -9999px;
29. left: -9999px;
30. }
31. tr {
32. border-bottom: 1px solid #CCC
33. }
34. tr:last-child {
35. border-bottom: none
36. }
37. td {
38. border: none;
39. position: relative;
40. padding-left: 30%;
41. }
42. td:before {
43. position: absolute;
44. top: 6px;
45. left: 6px;
46. width: 45%;
47. padding-right: 10px;
48. white-space: nowrap;
49. }
50. /*----CSS3 Selector-----*/
51. td:nth-of-type(1):before {
52. content: "Item Name";
53. }
54. td:nth-of-type(2):before {
55. content: "Item Code";
56. }
57. }

For such more Blogs you can visit to http://findnerd.com/NerdDigest