Tabellenveränderung bei mouseover

Hallo, hat jemand eine Idee, warum der rote Bereich schmaler wird, wenn die Maus über der Tabelle ist?

Der hier verwendete Code

<!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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!