Trim table
How do I make an trim table?
What is a trim table? How do you make a trim table? This script and codes were developed by Bozhana on 20 November 2022, Sunday.
Trim table - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>trim table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <style type="text/css">
</style>
<table class="trim-table"> <thead class="trim-thead"> <tr class="trim-tr"> <th class="trim-th"> Модификация (Двигател)</th> <th class="trim-th">Мощност (кс)</th> <th class="trim-th">Обем на двигателя</th> <th class="trim-th">Брой цилиндри</th> <th class="trim-th">Вид на<br /> двигателя </th> <th class="trim-th">Горивна<br /> система </th> <th class="trim-th">Среден разход на бензин</th> <th class="trim-th">Производство (от-до)</th> </tr> </thead> <tbody class="trim-tbody"> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=795">2.0 (101 Hp)</a></td> <td class="trim-td" data-column="Мощност">101</td> <td class="trim-td" data-column="Кубатура">1984 cm3</td> <td class="trim-td" data-column="Бр. цил.">4</td> <td class="trim-td" data-column="Разп. на цил.">редови</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">8.1 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1991 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=795">2.0 E quattro (115 Hp)</a></td> <td class="trim-td" data-column="Мощност">115</td> <td class="trim-td" data-column="Кубатура">1984 cm3</td> <td class="trim-td" data-column="Бр. цил.">4</td> <td class="trim-td" data-column="Разп. на цил.">редови</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">8.5 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1990 - 1992</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=795">2.0 E (115 Hp)</a></td> <td class="trim-td" data-column="Мощност">115</td> <td class="trim-td" data-column="Кубатура">1984 cm3</td> <td class="trim-td" data-column="Бр. цил.">4</td> <td class="trim-td" data-column="Разп. на цил.">редови</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">8.1 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1991 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=803">2.2 S4 Turbo quattro (230 Hp)</a></td> <td class="trim-td" data-column="Мощност">230</td> <td class="trim-td" data-column="Кубатура">2226 cm3</td> <td class="trim-td" data-column="Бр. цил.">5</td> <td class="trim-td" data-column="Разп. на цил.">редови</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">10.8 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1991 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=802">2.3 E quattro (133 Hp)</a></td> <td class="trim-td" data-column="Мощност">133</td> <td class="trim-td" data-column="Кубатура">2309 cm3</td> <td class="trim-td" data-column="Бр. цил.">5</td> <td class="trim-td" data-column="Разп. на цил.">редови</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">9.6 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1991 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=802">2.3 E (133 Hp)</a></td> <td class="trim-td" data-column="Мощност">133</td> <td class="trim-td" data-column="Кубатура">2309 cm3</td> <td class="trim-td" data-column="Бр. цил.">5</td> <td class="trim-td" data-column="Разп. на цил.">редови</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">9.6 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1991 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=802">2.6 V6 quattro (150 Hp)</a></td> <td class="trim-td" data-column="Мощност">150</td> <td class="trim-td" data-column="Кубатура">2598 cm3</td> <td class="trim-td" data-column="Бр. цил.">6</td> <td class="trim-td" data-column="Разп. на цил.">V-образен</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">10.0 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1992 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=802">2.6 V6 (150 Hp)</a></td> <td class="trim-td" data-column="Мощност">150</td> <td class="trim-td" data-column="Кубатура">2598 cm3</td> <td class="trim-td" data-column="Бр. цил.">6</td> <td class="trim-td" data-column="Разп. на цил.">V-образен</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">8.7 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1992 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=802">2.8 E quattro (174 Hp)</a></td> <td class="trim-td" data-column="Мощност">174</td> <td class="trim-td" data-column="Кубатура">2771 cm3</td> <td class="trim-td" data-column="Бр. цил.">6</td> <td class="trim-td" data-column="Разп. на цил.">V-образен</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">10.0 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1991 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=802">2.8 E (174 Hp)</a></td> <td class="trim-td" data-column="Мощност">174</td> <td class="trim-td" data-column="Кубатура">2771 cm3</td> <td class="trim-td" data-column="Бр. цил.">6</td> <td class="trim-td" data-column="Разп. на цил.">V-образен</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">9.2 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1991 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=807">4.2 S4 V8 quattro (290 Hp)</a></td> <td class="trim-td" data-column="Мощност">290</td> <td class="trim-td" data-column="Кубатура">4172 cm3</td> <td class="trim-td" data-column="Бр. цил.">8</td> <td class="trim-td" data-column="Разп. на цил.">V-образен</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">11.5 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1994 - 1994</td> </tr> <tr class="trim-tr"> <td class="trim-td" data-column="Модификация"><a class="carlinks" href="/categories.php?CategoryID=807">4.2 S4 V8 quattro (280 Hp)</a></td> <td class="trim-td" data-column="Мощност">280</td> <td class="trim-td" data-column="Кубатура">4172 cm3</td> <td class="trim-td" data-column="Бр. цил.">8</td> <td class="trim-td" data-column="Разп. на цил.">V-образен</td> <td class="trim-td" data-column="Горивна с-ма">многоточково впръскване</td> <td class="trim-td" data-column="Ср. разход">11.3 l / 100 km.</td> <td class="trim-td" data-column="Год. от-до">1992 - 1994</td> </tr> </tbody>
</table>
</body>
</html>
Trim table - Script Codes CSS Codes
.trim-table { width: 100%; border-collapse: collapse; margin: 10px auto; vertical-align: middle;
}
.trim-tr:nth-of-type(odd) { background: rgba(0, 0, 0, 0.05);
}
.trim-tr:nth-of-type(even) { background: rgba(255, 255, 255, 0.2);
}
.trim-td { background: none !Important;
}
.trim-th { background: rgba(0, 0, 0, 0.6); color: white !Important; text-align: center !Important;
}
.trim-td:first-child { text-align: left;
}
.trim-td,
.trim-th { border: 1px solid rgba(0, 0, 0, 0.1); text-align: center; font-size: 14px !Important; padding: 5px !Important; vertical-align: middle;
}
.carlinks { color: #0047bb !Important; text-decoration: underline !Important; padding: 0 !Important;
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { .trim-table { width: 100%; } .trim-table, .trim-thead, .trim-tbody, .trim-th, .trim-td, .trim-tr { display: block; } .trim-thead .trim-tr { position: absolute; top: -9999px; left: -9999px; } .trim-td { border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.07); position: relative; padding-left: 50% !Important; text-align: left; } .trim-td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; content: attr(data-column); color: #000; font-weight: bold; } .carlinks { color: blue !Important; text-decoration: underline !Important; padding: 0 !Important; }
}
Developer | Bozhana |
Username | mesechina |
Uploaded | November 20, 2022 |
Rating | 3 |
Size | 2,632 Kb |
Views | 10,120 |
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 |
Software gr | 6,620 Kb |
Calculator | 4,205 Kb |
A Pen by Bozhana | 6,995 Kb |
Terms and conditions en | 3,419 Kb |
Instructions | 1,150 Kb |
Software-eng | 6,428 Kb |
Pricelist | 4,384 Kb |
Home page boxes | 2,459 Kb |
Fobos 6cil | 1,505 Kb |
Calculator gr | 4,552 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 |
Toolbar | Onsen | 5,414 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
SVG hamburger menu button | Elifitch | 2,602 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Contact | GanNichiHa | 2,514 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Weather App | Kw7oe | 3,162 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 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!