RWD table
How do I make an rwd table?
What is a rwd table? How do you make a rwd table? This script and codes were developed by Kseso on 23 August 2022, Tuesday.
RWD table - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RWD table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table> <thead> <tr> <th>Nombre</th> <th>Apellidos</th> <th>Cargo</th> <th>Twitter</th> <th>Id</th> </tr> </thead> <tbody> <tr> <td data-head='Nombre'>Fulano</td> <td data-head='Apellidos'>Mengano Zutano</td> <td data-head='Cargo'>Vende Humo</td> <td data-head='Twitter'>@Fulano</td> <td data-head='Id'>1</td> </tr> <tr> <td data-head='Nombre'>Mengano</td> <td data-head='Apellidos'>Fulano Zutano</td> <td data-head='Cargo'>Café tester</td> <td data-head='Twitter'>@Mengano</td> <td data-head='Id'>2</td> </tr> <tr> <td data-head='Nombre'>Zutano</td> <td data-head='Apellidos'>Fulano Mengano</td> <td data-head='Cargo'>Soñador</td> <td data-head='Twitter'>@Zutano</td> <td data-head='Id'>3</td> </tr> <tr> <td data-head='Nombre'>Fulanito</td> <td data-head='Apellidos'>Menganito Zutano</td> <td data-head='Cargo'>Pilla pilla</td> <td data-head='Twitter'>@Fulanito</td> <td data-head='Id'>4</td> </tr> </tbody>
</table>
</body>
</html>
RWD table - Script Codes CSS Codes
* {margin:0;padding:0; border: 0 none; position: relative;}
*, *:before, *:after {box-sizing: inherit;}
html{ box-sizing: border-box; background: #fff; font-size: 1rem;
}
table { table-layout: fixed; margin: 1rem auto; width: 90%; box-shadow: 0 0 2px rgba(0,0,0,.4); border-collapse: collapse;
}
thead {
}
th { background: #1195b2; color: #fff; font-weight: 400; padding: .7rem 0; border: 3px solid #fff; font-size: 1.5rem; font-variant: small-caps; width: 22%;
}
th:last-child {width: 8%;}
tr:nth-child(even) { background: rgba(17,149,178,.2);
}
td { padding: .5rem 1rem; border-right: 1px solid rgba(0,0,0,.05);
}
td:last-child { border-right: 0 none; text-align: center;
}
@media only screen and (max-width:600px) { table{ width: 98%; } thead {display: none;} tr {border-bottom: 2px solid rgba(17,149,178,.35);} tr:last-child {border-bottom: 0 none;} td { display: block; padding: .3rem .5rem; } td:before { content: attr(data-head); display: inline-block; width: auto;; min-width: 40%; font-weight: 900; padding-right: 1rem; font-variant: small-caps; } td:last-child {text-align: left;} td:nth-child(odd) { background: rgba(17,149,178,.15); }
}
Developer | Kseso |
Username | Kseso |
Uploaded | August 23, 2022 |
Rating | 3 |
Size | 2,076 Kb |
Views | 30,360 |
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!
Name | Size |
Gamma-Corrected Colorizing | 2,877 Kb |
Aspect ratios pure Css | 2,661 Kb |
DYNAMIC INSIDE BLUR PURE CSS | 4,925 Kb |
Double checked. Pure Css | 6,280 Kb |
Slicing images pure Css and more | 4,344 Kb |
Charts pure Css | 6,674 Kb |
Automanual-K gallery | 6,412 Kb |
Slider with oblique border | 2,296 Kb |
Auto Hexagonal CSS Grid Layout | 3,840 Kb |
Parallax pure Css | 3,274 Kb |
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!
Name | Username | Size |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
FCC_Twitch.tv | MitchES | 3,466 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Table border-collapse property | Maxds | 1,672 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!