<!DOCTYPE html>
<html lang="de">
<head>
<title>Summary Details</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
main {
display: inline-flex;
flex-direction: column;
}
span {
display: inline-block;
}
table {
max-width: 800px;
margin: 0 auto;
}
th {
text-align: left;
}
div.headline,
details>summary {
display: flex;
}
details>summary>span {
white-space: nowrap;
}
::marker {
display: none;
}
div.headline>span:first-of-type,
summary>span:first-of-type {
flex: 0 0 3.5em;
}
summary::after {
content: '►';
margin-left: auto;
}
details[open] summary:after {
content: "▼";
}
details>table {
margin-left: 1em;
}
</style>
</head>
<body>
<main>
<div class="headline">
<table>
<tr>
<td><span>Lfd. Nr</span></td>
<td><span>Name der CD</span></td>
</tr>
</table>
</div>
<table>
<tr>
<td><span>01.</span></td>
<td><span>100 Rock Hits - The Sound of my Life</span></td>
</tr>
</table>
<details>
<table>
<thead>
<tr>
<th>cd2</th>
<th>Interpret</th>
<th>Titel</th>
<th>Zeit</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.</td>
<td>Golden Earring</td>
<td>Radar Love</td>
<td>05:05</td>
</tr>
<tr>
<td>02.</td>
<td>Heart</td>
<td>Barracuda</td>
<td>04:24</td>
</tr>
<tr>
<td>03.</td>
<td>Judas Priest</td>
<td>Living After Midnight</td>
<td>03:31</td>
</tr>
<tr>
<td>04.</td>
<td>Alice Cooper</td>
<td>No More Mr. Nice Guy</td>
<td>03:07</td>
</tr>
</tbody>
</table>
</details>
<details>
<summary>
<span>01.</span>
<span>Andrea Bocelli - Cieli Di Toscana</span>
</summary>
<table>
<thead>
<tr>
<th>CD_01</th>
<th>Interpret</th>
<th>Titel</th>
<th>Zeit</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.</td>
<td>Andrea Bocelli</td>
<td>Chiara</td>
<td>04:04</td>
</tr>
</tbody>
</table>
</details>
</main>
<script>
document.addEventListener('click', event => {
const
// Geöffnete Details bereit stellen:
openDetails = document.querySelector('details[open]'),
// Vorfahre des geklickten Elementen bereit stellen:
ancestorDetails = event.target.closest('details');
// Sind geöffnete Details vorhanden
// UND
// wurde nicht auf ein nicht geöffnetes Detail geklickt?
if (openDetails && !(ancestorDetails && ancestorDetails.matches('[open]'))) {
// Das geöffnete Detail schließen:
openDetails.removeAttribute('open');
}
});
</script>
</body>
</html>Das war Absicht, ich wollte die verschachtelte Struktur damit deutlich machen. Wenn Du dies löschst, rutscht die Tabelle nach links:
details>table {
margin-left: 1em;
}Ich hatte dich früher so verstanden, dass Du das so haben willst. Das macht das Javascript, wenn Du es löschst unterbleibt das automatische Zuklappen.
