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

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/01/responsive-table-design-css.pnghttp://w3lessons.info/wp-content/uploads/2013/01/responsive-table-design-css-150x150.pngKarthikeyan KWeb DesignCascading Style Sheets,responsive,table design
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 resolutionsView...