Search code examples
htmlgoogle-chromeborderexpand

Strange border behavior in Chrome when expanding table row divs

I have a table with expand/collapse div elements in td. When expanding in IE9, all is OK, but in Google Chrome (version 16.0.912.75 m) I get unexpected solid borders on differing spots. It seems as if the colspan=3 tr's have something to do with this, as the solid borders appear above and under those. Also, the div width values seem to influence this: the behavior changes when choosing other values for these.

See below html. I added 4screen prints: initial view, expand row1, expand row2, expand both. What is causing this odd behavior and how can I prevent it?

initial row1 expanded row2 expanded both expanded

<html>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
    <title>Example</title>
    <style type="text/css">
        table {
            border: solid black 1pt;
            border-collapse: collapse;
            padding: 0;
            border-spacing: 0;
        }

        th {
            background: rgb(255, 255, 153);
            border-style: solid;
            border-color: black;
            border-width: 1pt;
            padding: 0cm 5pt;
            color: black;
            font-family: Verdana;
                font-size: 10pt;
            font-style: normal;
            vertical-align: top;
        }
        td {
            border-style: dotted dotted none none;
            border-color: black;
            border-width: 1pt;
            padding: 0cm 5pt;
            color: black;
            font-style: normal;
            font-family: Verdana;
                font-size: 10pt;
            vertical-align: top;
            margin-bottom: 4.5pt;
            margin-top: 0pt;
        }

        div.QUAL {
            margin-left:4pt;
            font-size: 90%;
        }

        input.buttonQUAL {
            color: blue;
            background: white;
            border: none;
            margin-left:0pt;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 100%;
        }

        div.listQUALdesc {
            color: black;
            background: white;
            font-size: 100%;
        }
    </style>
    <script type="text/javascript" language="javascript">
        //expand and collapse functions based on id
        function toggleMe(a){
            var e = document.getElementById(a);
            if(!e) return true;
            if( e.style.display == "none")
                {
                e.style.display = "block"
                }
            else    {
                e.style.display = "none"
                }
            return true;
        };

        function expandByIdStart(IdStart){
            var divs = document.getElementsByTagName('div');
            for (var i=0; i<divs.length; i++) {
                if (divs[i].id.match("^"+IdStart) == IdStart) { 
                    divs[i].style.display = "block";
                }
            }
            return true;
        }

        function collapseByIdStart(IdStart){
            var divs = document.getElementsByTagName('div');
            for (var i=0; i<divs.length; i++) {
                if (divs[i].id.match("^"+IdStart) == IdStart) { 
                    divs[i].style.display = "none";
                }
            }
            return true;
        }
    </script>
</head>
<body>
    <p/>
    <table style='table-layout:fixed word-break:break-all'>
        <col width="70"><col width="70"><col width="70">
        <thead><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr></thead>
        <tbody>
            <tr>
                <td>
                    <input
                        type="button"
                        class="buttonQUAL"
                        onclick="toggleMe('row1'); return true;"
                        onMouseOver="this.style.cursor='hand'"
                        value="row1"/>
                </td>
                <td>text1
                    <div id="row1" class="listQUALdesc" style="width:100; display:none">
                        text2
                    </div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td><div class="QUAL">xxx</div></td>
                <td>text3</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3">Start</td>
            </tr>
            <tr>
                <td>
                    <input
                        type="button"
                        class="buttonQUAL"
                        onclick="toggleMe('row2'); return true;"
                        onMouseOver="this.style.cursor='hand'"
                        value="row2"/>
                    <div id="row2" class="QUAL" style="display:none;width:65">
                        text5<br/>
                    </div>
                </td>
                <td>text4</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3">End</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
Solution

  • See comments - adding < !doctype html > partly solves the issue

    Addition

    There are some issues to be found on the web that point at an error in Chrome and Safari (which use webkit) like the following: webkit-colspan-table-border-bug.

    It seems that using colspan and bottom-border in combination with border-collapse: collapse leads to border display issues, just as in my example.