Tabellenveränderung bei mouseover

J

jemand anders

Erfahrenes Mitglied
Hallo,

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>
 
Wenn die Maus nicht drauf ist, geht die rote sichtbare Tablerow über die gesamte Breite, wenn die Maus drüber ist, ist bei allen roten Tablerows rechts Platz.
https://abload.de/img/screenshot_20190515_0igkhv.png
https://abload.de/img/screenshot_20190515_0majho.png

Problem gelöst. Statt inherit muss muss es table-row sein bei der hover-class.

Code: 
<script>
   
        var elements = ["table","tr"];
        for (var i = 0; i < elements.length; i++) {
            var e = document.getElementsByTagName(elements[i]);
            for (var n = 0; n < e.length; n++) {
                var style = getComputedStyle(e[n]);
                console.log(e[n].tagName + " " + style.display);
            }
           
        }

</script>
 
Zuletzt bearbeitet:
Ist ja super, dass Du es lösen konntest, da haben wir wieder etwas neues gelernt. Ich hatte es mir angesehen und weder eine Erklärung noch eine Lösung gefunden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück