Tabellenveränderung bei mouseover


phwert

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>
 

phwert

Erfahrenes Mitglied
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:

Sempervivum

Erfahrenes Mitglied
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.
 

Neue Beiträge