jemand anders
Erfahrenes Mitglied
Hallo,
hat jemand eine Idee, warum der rote Bereich schmaler wird, wenn die Maus über der Tabelle ist?
Gruß
hat jemand eine Idee, warum der rote Bereich schmaler wird, wenn die Maus über der Tabelle ist?
Gruß
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="de-DE" />
<style>
body {}
table {
border-collapse: collapse;
width: 100%;
}
tr.hidden {
display: none;
}
table.t1,
tr,
td,
th {
border: 1px solid #999;
}
td,
th {
font-size: 82%;
/*75%; x-small*/
padding: 2px;
vertical-align: top;
word-wrap: break-word;
}
th {
font-weight: bold;
}
td.hidden {
display: none;
}
tr.t1:hover table.t2 tr {
display: inherit;
width: 100%;
}
table.t2 {
width: 100%;
background: red;
}
</style>
</head>
<body>
<table class='t1'>
<tbody>
<tr class='t1'>
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
<td>
<table class='t2'>
<tbody>
<tr>
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
<td>ccccc</td>
<td>ddddddddddddd</td>
</tr>
<tr class="hidden">
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
<td>ccccc</td>
<td>ddddddddddddd</td>
</tr>
<tr class="hidden">
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
<td>ccccc</td>
<td>ddddddddddddd</td>
</tr>
<tr class="hidden">
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
<td>ccccc</td>
<td>ddddddddddddd</td>
</tr>
</tbody>
</table>
</td>
<td>ddddddddddddd</td>
<td>eeeeeeeee</td>
<td>ffffffffffff</td>
<td>ggggg</td>
<td>bbbbbbbbbbbb</td>
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
<td>aaaaaaaa</td>
<td>bbbbbbbbbbbb</td>
</tr>
</tbody>
</table>
</body>
</html>