Responsive and friendly table

Developer
Laura Moraiti
Size
4,796 Kb
Views
30,360
  1. Responsive and friendly table Previews
  2. Responsive and friendly table HTML Codes
  3. Responsive and friendly table CSS Codes

How do I make an responsive and friendly table?

It's a display of tabular data, using divs because I needed a nice and friendly display for mobile.Color coding, badges and icons. What is a responsive and friendly table? How do you make a responsive and friendly table? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

Responsive and friendly table Previews
IQ Test

Responsive and friendly table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive and friendly table</title> <link href="https://fontastic.s3.amazonaws.com/CqyWbPkSvLt8RjywNK2qWa/icons.css" rel="stylesheet"><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row-hr"> <div class="title"> Title </div> <div class="meta-data"> <div class="col time"> Time </div> <div class="col zone"> Zone </div> <div class="col notes"> Notes </div> <div class="col status"> Status </div> </div>
</div>
<div class="row"> <div class="title"> Yummy title about chocolate birthday cakes and balloons and cakes and balloons </div> <div class="meta-data"> <div class="col time"> 2hrs </div> <div class="col zone"> Recipes </div> <div class="col notes"> <div class="yes"></div> </div> <div class="col status"></div> </div>
</div>
<div class="row urgent"> <div class="title"> This is an example of a title of a news piece about cats and birthday cakes </div> <div class="meta-data"> <div class="col time"> 10mins </div> <div class="col zone"> Recipes </div> <div class="col notes"> <div class="no"></div> </div> <div class="col status"> <div class="icon-urgent"></div> </div> </div>
</div>
<div class="row"> <div class="title"> Yummy title about chocolate birthday cakes and balloons and cakes and balloons </div> <div class="meta-data"> <div class="col time"> 2hrs </div> <div class="col zone"> Recipes </div> <div class="col notes"> <div class="no"></div> </div> <div class="col status"> <div class="icon-seen"></div> </div> </div>
</div>
<div class="row"> <div class="title"> Yummy title about chocolate birthday cakes and balloons and cakes and balloons </div> <div class="meta-data"> <div class="col time"> 2hrs </div> <div class="col zone"> Recipes </div> <div class="col notes"> <div class="yes"></div> </div> <div class="col status"> <div class="icon-seen"></div> </div> </div>
</div>
<div class="row rejected"> <div class="title"> This is an example of a title of a news piece about cats and birthday cakes </div> <div class="meta-data"> <div class="col time"> 10mins </div> <div class="col zone"> Recipes </div> <div class="col notes"> <div class="no"></div> </div> <div class="col status"> <div class="icon-rejected"></div> </div> </div>
</div>
<div class="row"> <div class="title"> Yummy title about chocolate birthday cakes and balloons and cakes and balloons </div> <div class="meta-data"> <div class="col time"> 2hrs </div> <div class="col zone"> Recipes </div> <div class="col notes"> <div class="yes"></div> </div> <div class="col status"> <div class="icon-seen"></div> </div> </div>
</div>
<div class="row published"> <div class="title"> Yummy title about chocolate birthday cakes and balloons and cakes and balloons </div> <div class="meta-data"> <div class="col time"> 2hrs </div> <div class="col zone"> Recipes </div> <div class="col notes"> <div class="no"></div> </div> <div class="col status"> <div class="icon-published"></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Responsive and friendly table - Script Codes CSS Codes

* { box-sizing: border-box; font-family: 'Source Sans Pro', sans-serif;
}
body { padding: 2em;
}
.row .title { font-weight: 700; color: #053456; padding: 1.5rem 1rem;
}
@media (max-width: 500px) { .row .title { padding: 1rem; }
}
.row .time { color: #247cbd;
}
.row .zone, .row .notes { text-transform: uppercase; font-size: .85em; color: #247cbd;
}
.row-hr .title,
.row-hr .col { color: #A5CFEE; font-size: 1.25em;
}
.row .notes .yes, .row .notes .no { width: 7px; height: 7px; border-radius: 100%;
}
@media (min-width: 501px) { .row .notes .yes, .row .notes .no { margin-top: -4px; }
}
.row .zone, .row .notes, .row .status { text-align: center;
}
@media (max-width: 500px) { .row .zone, .row .notes, .row .status { text-align: left; }
}
.row.urgent .title:before, .row.rejected .title:before, .row.published .title:before { text-transform: uppercase; margin-right: .5em; font-size: 80%; color: #fff; padding: 1px 3px; border-radius: 3px;
}
.icon-seen,
.icon-urgent { font-size: 1.25em;
}
.icon-seen { color: #053456;
}
.row { border-bottom: 1px solid #dbecf8; position: relative;
}
.row * { display: inline-block; vertical-align: middle;
}
.row .title { width: 50%; cursor: pointer;
}
@media (min-width: 501px) { .row .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 500px) { .row .title { display: block; width: 100%; clear: left; }
}
.row .meta-data { width: 50%;
}
.row .meta-data > * { width: 25%; padding: 0 0.5rem; cursor: pointer;
}
@media (max-width: 500px) { .row .meta-data > * { width: auto; display: inline-block; }
}
@media (max-width: 500px) { .row .meta-data { position: relative; display: block; width: 100%; clear: left; background-color: rgba(165, 207, 238, 0.1); padding: 1rem; }
}
@media (max-width: 500px) { .row .meta-data .col:before { display: block; text-transform: uppercase; font-size: .7em; }
}
@media (max-width: 500px) { .row .time:before { content: 'Time'; }
}
@media (max-width: 500px) { .row .zone { font-size: 1em; } .row .zone:before { content: 'Zone'; }
}
@media (max-width: 500px) { .row .notes:before { content: 'Notes'; }
}
.row .notes .yes { background-color: #7AC558;
}
.row .notes .no { background-color: rgba(0, 0, 0, 0.15);
}
@media (max-width: 500px) { .row .status { float: right; position: absolute; top: 50%; right: 0.5rem; margin-top: -.75em; } .row .status * { font-size: 1.5em; }
}
.row.urgent * { color: #7AC558;
}
.row.urgent .title:before { content: "urgent"; font-weight: 400; background-color: #7AC558;
}
.row.rejected { cursor: not-allowed !important;
}
.row.rejected * { color: #ed365b; cursor: not-allowed !important;
}
.row.rejected .title { font-weight: 400;
}
.row.rejected .title:before { content: "rejected"; background-color: #ed365b;
}
.row.published { cursor: default !important;
}
.row.published * { color: #A5CFEE; cursor: default !important;
}
.row.published .title { font-weight: 400;
}
.row.published .title:before { content: "published"; background-color: #A5CFEE;
}
.row-hr { background-color: #f2f8fd;
}
.row-hr * { display: inline-block;
}
.row-hr .title { width: 50%; padding: 1rem;
}
.row-hr .meta-data { width: 50%;
}
.row-hr .meta-data * { width: 25%; padding: 0 0.5rem;
}
@media (max-width: 500px) { .row-hr .meta-data { display: none; }
}
.row-hr .notes, .row-hr .status, .row-hr .zone { text-align: center;
}
Responsive and friendly table - Script Codes
Responsive and friendly table - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 4.5
Size 4,796 Kb
Views 30,360
Do you need developer help for Responsive and friendly table?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Laura Moraiti (Fixie) Script Codes
Name
Responsive three column fixed layout
Striped background for a container with more than one element
Text and headings flow for a health site, on the making
Fun responsive split layout
Responsive Equal Height Columns using jQuery
A Pen by Laura Moraiti
Simple gallery jquery
Reusable simple dropdown
Breadcrumb made with jQuery
Unconventional slideshow
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!