Responsive Table

Developer
Boyd Massie
Size
2,941 Kb
Views
10,120
  1. Responsive Table Previews
  2. Responsive Table HTML Codes
  3. Responsive Table CSS Codes

How do I make an responsive table?

A great responsive data table that adjusts to any device. http://css-tricks.com/examples/ResponsiveTables/responsive.php. What is a responsive table? How do you make a responsive table? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.

Responsive Table Previews
IQ Test

Responsive Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if !IE]><!-->	<style>	/*	Max width before this PARTICULAR table gets nasty	This query will take effect for any screen smaller than 760px	and also iPads specifically.	*/	@media	only screen and (max-width: 760px),	(min-device-width: 768px) and (max-device-width: 1024px) {	/* Force table to not be like tables anymore */	table, thead, tbody, th, td, tr {	display: block;	}	/* Hide table headers (but not display: none;, for accessibility) */	thead tr {	position: absolute;	top: -9999px;	left: -9999px;	}	tr { border: 1px solid #ccc; }	td {	/* Behave like a "row" */	border: none;	border-bottom: 1px solid #eee;	position: relative;	padding-left: 50%;	}	td:before {	/* Now like a table header */	position: absolute;	/* Top/left values mimic padding */	top: 6px;	left: 6px;	width: 45%;	padding-right: 10px;	white-space: nowrap;	}	/*	Label the data	*/	td:nth-of-type(1):before { content: "First Name"; }	td:nth-of-type(2):before { content: "Last Name"; }	td:nth-of-type(3):before { content: "Job Title"; }	td:nth-of-type(4):before { content: "Favorite Color"; }	td:nth-of-type(5):before { content: "Wars of Trek?"; }	td:nth-of-type(6):before { content: "Porn Name"; }	td:nth-of-type(7):before { content: "Date of Birth"; }	td:nth-of-type(8):before { content: "Dream Vacation City"; }	td:nth-of-type(9):before { content: "GPA"; }	td:nth-of-type(10):before { content: "Arbitrary Data"; }	}	/* Smartphones (portrait and landscape) ----------- */	@media only screen	and (min-device-width : 320px)	and (max-device-width : 480px) {	body {	padding: 0;	margin: 0;	width: 320px; }	}	/* iPads (portrait and landscape) ----------- */	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {	body {	width: 495px;	}	}	</style>	<!--<![endif]--> <div id="page-wrap"> <table>	<thead>	<tr>	<th>First Name</th>	<th>Last Name</th>	<th>Job Title</th>	<th>Favorite Color</th>	<th>Wars or Trek?</th>	<th>Porn Name</th>	<th>Date of Birth</th>	<th>Dream Vacation City</th>	<th>GPA</th>	<th>Arbitrary Data</th>	</tr>	</thead>	<tbody>	<tr>	<td>James</td>	<td>Matman</td>	<td>Chief Sandwich Eater</td>	<td>Lettuce Green</td>	<td>Trek</td>	<td>Digby Green</td>	<td>January 13, 1979</td>	<td>Gotham City</td>	<td>3.1</td>	<td>RBX-12</td>	</tr>	<tr> <td>The</td> <td>Tick</td> <td>Crimefighter Sorta</td> <td>Blue</td> <td>Wars</td> <td>John Smith</td> <td>July 19, 1968</td> <td>Athens</td> <td>N/A</td> <td>Edlund, Ben (July 1996).</td>	</tr>	<tr> <td>Jokey</td> <td>Smurf</td> <td>Giving Exploding Presents</td> <td>Smurflow</td> <td>Smurf</td> <td>Smurflane Smurfmutt</td> <td>Smurfuary Smurfteenth, 1945</td> <td>New Smurf City</td> <td>4.Smurf</td> <td>One</td>	</tr>	<tr> <td>Cindy</td> <td>Beyler</td> <td>Sales Representative</td> <td>Red</td> <td>Wars</td> <td>Lori Quivey</td> <td>July 5, 1956</td> <td>Paris</td> <td>3.4</td> <td>3451</td>	</tr>	<tr> <td>Captain</td> <td>Cool</td> <td>Tree Crusher</td> <td>Blue</td> <td>Wars</td> <td>Steve 42nd</td> <td>December 13, 1982</td> <td>Las Vegas</td> <td>1.9</td> <td>Under the couch</td>	</tr>	</tbody>	</table> </div>
</body>
</html>

Responsive Table - Script Codes CSS Codes

* {	margin: 0;	padding: 0;
}
body {	font: 14px/1.4 Georgia, Serif;
}
#page-wrap {	margin: 50px;
}
p {	margin: 20px 0;
}	/*	Generic Styling, for Desktops/Laptops	*/	table {	width: 100%;	border-collapse: collapse;	}	/* Zebra striping */	tr:nth-of-type(odd) {	background: #eee;	}	th {	background: #333;	color: white;	font-weight: bold;	}	td, th {	padding: 6px;	border: 1px solid #ccc;	text-align: left;	}
Responsive Table - Script Codes
Responsive Table - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 3
Size 2,941 Kb
Views 10,120
Do you need developer help for Responsive 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!

Boyd Massie (massiebn) Script Codes
Name
JQuery Quiz
Drag and Drop Images
QuickFlip
Image Hover
Inline Frame PDF
Snow Falling JS
Desaturate an image with CSS
Page Peel
Fancy Image Showcase With Timer Bar
JQuery Popeye Gallery
Create amazing captions 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!