Tutorials HTML5 How to Create a Mobile Responsive Table using CSS3

How to Create a Mobile Responsive Table using CSS3

How to Create a Mobile Responsive Table Using Css3
The following code snippet demonstrates, how to create a mobile responsive table style using CSS3. For demo purpose we have used a single media query for mobile, you can extend it to work for tablet or different sized screens.

[download url=”https://github.com/StackTipsLab/HTML-CSS-JS-Examples” demo=”http://stacktips.com/demos/demo-mobile-responsive-table-using-css3″]

HTML Code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Popup Dropdown CSS Example</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
    <style>
	/* Your stylesheet here */
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="table">
            <div class="row header">
                <div class="cell">Company</div>
                <div class="cell">Contact</div>
                <div class="cell">Location</div>
            </div>

            <div class="row">
                <div class="cell">Alfreds Futterkiste </div>
                <div class="cell">Maria Anders</div>
                <div class="cell">UK</div>
            </div>

            <div class="row">
                <div class="cell">Centro comercial Moctezuma </div>
                <div class="cell">Francisco Chang</div>
                <div class="cell">Germany</div>
            </div>

            <div class="row">
                <div class="cell">Ernst Handel</div>
                <div class="cell">Roland Mendel</div>
                <div class="cell">Austria</div>
            </div>

            <div class="row">
                <div class="cell">Laughing Bacchus Winecellars </div>
                <div class="cell">Yoshi Tannamuri</div>
                <div class="cell">Canada</div>
            </div>

        </div>
        <!--Table-->
    </div>
</body>
</html>

CSS Stylesheet

* {
    box-sizing: border-box;
}
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
.wrapper {
    margin: 0 auto;
    max-width: 1024px;
    margin-top: 40px;
}
.table {
    margin: 0 0 40px 0;
    width: 100%;
    display: table;
}
.row {
    display: table-row;
    background: #fff;
}
.row:nth-of-type(odd) {
    background: #ebeff2;
}
.row.header {
    font-weight: 900;
    color: #ffffff;
    background: #039BE5;
}
.cell {
    padding: 10px 12px;
    display: table-cell;
}
@media screen and (max-width: 580px) {
    .table {
        display: block;
    }
    .row {
        padding: 12px 0;
        display: block;
    }
    .cell {
        padding: 2px 12px;
        display: block;
    }
}
Total
0
Shares
Leave a Reply

Your email address will not be published.

Previous Post

Creating Popup Dropdown CSS and JavaScript Example

Next Post
Adsense Dashboard Material Design

Google Brings Material Design to AdSense Dashboard

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All