Today I am going to share how to create a responsive table design using simple css. Sometimes, a nicely formatted table is perfect for making a point and making a lot of data available at a glance. If that sounds like something you need.
Try live demo with different screen resolutions
Table responsive design is very simple, just give width and height – 100%
CSS Code
table { border-collapse: collapse; border-spacing: 0; } div.styled-table { display: inline-block; width: 100%; } div.styled-table > table { width:100%; text-align: left; white-space: normal; } div.styled-table > table > thead > tr > th { padding: 10px 10px 9px 10px; text-align: left; margin-top: 10px; background-color: #ECB825; background-repeat: no-repeat; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px; color: white; } div.styled-table > table td { padding: 10px 10px 7px 10px; } div.styled-table > table tbody { margin-top: 3px; } div.styled-table > table tbody tr { border: 1px solid #f0f0f0; border-top: none; background: transparent; } div.styled-table > table tfoot { font-size: 0.9em; }
Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!
Thanks!
View Demo Download Now