I have a table. Clicking on "click me" shows the hidden data. Here is the fiddle : https://jsfiddle.net/L5th9vdb/
The code is part of an email template where for/id to link between checkbox and label isnt supported. I tried to wrap the checkbox in the label but it messes up the table. Is there any way to keep the table design intact and have the checkbox show/hide the row without using id/for attributes ?
code :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<!-- add icon link -->
<link rel="icon" href="./MAblueIcon.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<head>
<style>
@charset "UTF-8";
/* #row1,#row2 {
display: none;
} */
.tab-label {
/* display: flex;
justify-content: space-between;
padding: 1em; */
background: #b9ce44;
font-weight: bold;
/* cursor: pointer; */
/* Icon */
}
/* .tab-label:hover {
background: #1a252f;
} */
/* .tab-label::after {
content: "❯";
width: 1em;
height: 1em;
text-align: center;
transition: all 0.35s;
} */
.tab-content {
overflow: hidden;
max-height: 0;
padding: 0 1em;
color: #2c3e50;
background: white;
transition: all 0.35s;
}
/* input:checked ~ .tab-label {
background: #1a252f;
} */
/* input:checked ~ .tab-label::after {
transform: rotate(90deg);
} */
input:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
</style>
</head>
<body style="margin: 0;padding: 0;min-width: 100%;width: 100%;
max-width: 100%; min-height: 100%; height: 100%;max-height: 100%; background: rgb(231, 207, 192);
min-height: 100vh;">
<div id="page-wrap" style="margin: 50px;background: cornflowerblue;">
<h1 style="margin: 0;line-height: 3;text-align: center;font: 30px/1.4 Georgia, Serif;">Table</h1>
<table role="presentation" style="width: 100%;border-collapse: collapse;">
<thead>
<tr>
<th rowspan="2" colspan="1"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
<tr>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
</thead>
<tbody>
<!-- Ist Row -->
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
<label class="tab-label" for="row1">Click Me</label>
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<!-- Ist accordion -->
<tr>
<td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
<input id="row1" type="checkbox">
<div class="tab-content">
<table role="presentation"
style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
<thead>
<tr>
<th rowspan="2" colspan="1"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<!-- <th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th> -->
<th rowspan="1" colspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
<tr>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<!-- <th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th> -->
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
</thead>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<!-- <td style="padding: 6px;border: 1px solid #ccc;text-align: center;">Athens</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">Edlund, Ben
(July 1996).</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td> -->
</tr>
</table>
</div>
</td>
</tr>
<!-- 2nd Row -->
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
<label class="tab-label" for="row2">Click Me</label>
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<!-- 2nd accordion -->
<tr>
<td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
<input id="row2" type="checkbox">
<div class="tab-content">
<table role="presentation"
style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
<thead>
<tr>
<th rowspan="2" colspan="1"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<!-- <th rowspan="1" colspan="4"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th> -->
<th rowspan="1" colspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
<tr>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2"
style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
</thead>
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>