Responsive Table Designs using CSS

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

View Demo Download Now

Responsive Table Design with CSS
Responsive Table Design with CSS

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

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

Leave a Comment