Responsive Table Idea

Developer
Eric Franklin
Size
2,358 Kb
Views
52,624
  1. Responsive Table Idea Previews
  2. Responsive Table Idea HTML Codes
  3. Responsive Table Idea CSS Codes

How do I make an responsive table idea?

What is a responsive table idea? How do you make a responsive table idea? This script and codes were developed by Eric Franklin on 25 July 2022, Monday.

Responsive Table Idea Previews
IQ Test

Responsive Table Idea - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Table Idea</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table class="l-table"> <tr> <th>No Coverage</th> <th>Basic Coverage</th> <th>Enhanced Coverage</th> </tr>
<tr> <td class="td-1">The bare minimum of acceptable coverage for a home that’s been financed, is coverage for the lending institution to cover its investment.
This is a lender-only policy and provides no coverage for the
new homeowner.</td> <td class="td-2">This policy covers homeowners for everything that occurred prior to the purchase date. It would not cover something discovered after the purchase date like non-permitted work done to the home.</td> <td class="td-3">This provides homeowners with all
the coverage of the basic policy plus things newly discovered like building permit violations, future claims, incorrect surveys, and more. </td>
</tr> <tr> <td class="bottom" colspan="3"><a class="fa fa-download" href="#">Download Policy Details</a></td> </tr>
</table> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Responsive Table Idea - Script Codes CSS Codes

body { font-family: 'Open Sans', sans-serif;
}
.l-table {	color: #FFF;	border-spacing: 0px;	max-width: 920px;	width: 100%;	margin: 0 auto;	display: table;
}
.l-table th,
.l-table td {	font-size: 16px;	max-width: 305px;	text-align: left;
}
.l-table th {	font-size: 20px;	padding: 10px;	text-transform: uppercase;
}
.l-table th:nth-child(1) { background: #cdcdcd;
}
.l-table th:nth-child(2) { background: #a1a1a1;
}
.l-table th:nth-child(3) { background: #7d7d7d;
}
.l-table tr td { padding: 20px 10px;
}
.l-table tr td:nth-child(1) { background: #91e0f3;
}
.l-table .td-1:before {	display: none;	content: "No Coverage";	text-transform: uppercase;	font-weight: bold;	font-size: 20px;	padding-bottom: 5px;	margin-bottom: 10px;	border-bottom: 1px dashed rgba(255, 255, 255, 0.46);
}
.l-table tr td:nth-child(2) { background: #457fc8;
}
.l-table .td-2:before {	display: none;	content: "Basic Coverage";	text-transform: uppercase;	font-weight: bold;	font-size: 20px;	padding-bottom: 5px;	margin-bottom: 10px;	border-bottom: 1px dashed rgba(255, 255, 255, 0.46);
}
.l-table tr td:nth-child(3) { background: #2d2a61;
}
.l-table .td-3:before {	display: none;	content: "Enhanced Coverage";	text-transform: uppercase;	font-weight: bold;	font-size: 20px;	padding-bottom: 5px;	margin-bottom: 10px;	border-bottom: 1px dashed rgba(255, 255, 255, 0.46);
}
.l-table tr td.bottom { background: #ececec; text-align: center;
}
.l-table tr td.bottom a { color: #646464; text-decoration: none;
}
tr td.bottom a:before { color: #2d2a61; margin-right: 10px; font-size: 20px; float: left;
}
@media (max-width: 600px) {	.l-table th {	display: none;	}	.l-table td {	display: block;	}	.l-table .td-1:before,	.l-table .td-2:before,	.l-table .td-3:before {	display: block;	}
}
Responsive Table Idea - Script Codes
Responsive Table Idea - Script Codes
Home Page Home
Developer Eric Franklin
Username FDfranklin
Uploaded July 25, 2022
Rating 3
Size 2,358 Kb
Views 52,624
Do you need developer help for Responsive Table Idea?

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!

Eric Franklin (FDfranklin) Script Codes
Name
Portfolio Landing Page
Animated Image
A Pen by Eric Franklin
Lightning Vs. Penguins Hover Thingy
Simple jQuery modal with form.
Fun with input fields.
Mock up health chart with pop ups.
Responsive Wedding Page
Gif play on hover.
Iguana Blog - LESS
Create amazing sales emails 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!