Tabellenveränderung bei mouseover


phwert

Erfahrenes Mitglied
#1
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
#3
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
#4
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.