Un-doing tables

Developer
Aaron Gustafson
Size
3,993 Kb
Views
36,432
  1. Un-doing tables Previews
  2. Un-doing tables HTML Codes
  3. Un-doing tables CSS Codes

How do I make an un-doing tables?

A simple take on un-doing tables. Most of the SASS stuff is just there to make it look nice. The meat is at the bottom. This technique has been put to use by NPR, BBC, and LivingSocial to name a few.. What is a un-doing tables? How do you make a un-doing tables? This script and codes were developed by Aaron Gustafson on 22 July 2022, Friday.

Un-doing tables Previews
IQ Test

Un-doing tables - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Un-doing tables</title> <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> <table>	<thead>	<tr>	<th scope="col">Name</th>	<th scope="col">Email</th>	<th scope="col">Dept, Title</th>	<th scope="col">Phone</th>	</tr>	</thead> <tbody> <tr class="vcard">	<th scope="row" class="n" data-title="Name">	<b class="family-name">Smith</b>,	<b class="given-name">Laura</b>	</th>	<td data-title="Email"><a class="email" href="mailto:[email protected]">[email protected]</a></td>	<td data-title="Dept, Title">	Biology, Director</td>	<td class="tel" data-title="Phone">	<a href="tel:+1123456789">123-456-789</a></td>	</tr>	<tr class="vcard">	<th scope="row" class="n" data-title="Name">	<b class="family-name">Johnson</b>,	<b class="given-name">Ron</b>	</th>	<td data-title="Email"><a class="email" href="mailto:[email protected]">[email protected]</a></td>	<td data-title="Dept, Title">	Purchasing, Director</td> <td class="tel" data-title="Phone">	<a href="tel:+11234567891">123-456-7891</a></td>	</tr>	</tbody>
</table>
</body>
</html>

Un-doing tables - Script Codes CSS Codes

@charset "UTF-8";
body { padding: 1em;
}
table { border-style: none; border-top-width: 0; width: auto;
}
table tr { border-style: none; border-bottom-width: 0;
}
table th, table td { border-style: none; padding-right: 1em; padding-top: 0.75em; padding-bottom: 0.75em; text-align: left; min-width: 50px; vertical-align: top;
}
table th.tool, table td.tool { padding: 0 1em;
}
table th + th,
table th + td,
table td + th,
table td + td { border-left-width: 1px;
}
table thead tr:last-child { border-bottom-width: 2px;
}
table thead th,
table tr.index th { font-size: 1.13333em; line-height: 1.41176em; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.25; text-transform: uppercase;
}
table thead th { border-bottom: 1px solid; padding-bottom: .25em;
}
table tr.index th { font-size: 1.33333em; line-height: 1.2em;
}
table tbody:first-of-type tr.index th { padding-top: 1em;
}
table tbody th { font-weight: normal;
}
@media (max-width: 47.9375em) { table { border: 0; border-bottom-width: 0.0625em; border-bottom-style: solid; padding-bottom: 1.4375em; padding-bottom: 0; display: block; width: 100%; /* * make everything display block so it * aligns vertically */ /* Labeling * adding a data-title attribute to the cells * lets us add text before the content to provide * the missing context * * Markup: * Content Here * * Display: * Column Header: Content Here */ } table caption { display: block; } table thead { display: none; visibility: hidden; } table tbody, table tr, table th, table td { border: 0; display: block; padding: 0; text-align: left; white-space: normal; } table tr { margin-bottom: 1.5em; } table th[data-title]:before, table td[data-title]:before { content: attr(data-title) ": "; font-weight: bold; } table th:not([data-title]) { font-weight: bold; } table td:empty { display: none; }
}
Un-doing tables - Script Codes
Un-doing tables - Script Codes
Home Page Home
Developer Aaron Gustafson
Username aarongustafson
Uploaded July 22, 2022
Rating 4.5
Size 3,993 Kb
Views 36,432
Do you need developer help for Un-doing tables?

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!

Aaron Gustafson (aarongustafson) Script Codes
Name
Form Patterns
Footnote references that maintain good user focus
MQ-based Content-controlled Optional Image Loading
Simplified JS-based MQ Inspector
Simple pull quote
Zoom Layouts v2
Simple Compact Labels
Easy Couch Mode
Pure CSS Modal
Lazy Loading Images
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!