JSFiddle - React, Tailwind, and code Playground

HTML

<div id="new">
<table>
    <tr>
        <td colspan="3">
            <!--img src="http://lorempixum.com/500/100" /-->
            <div style="width:500px;height:100px;background:olive"></div>
        </td>
    </tr>
    <tr>
        <td>
            Hello
        </td>
        <td>
            World
        </td>
        <td>
            !
        </td>
    </tr>
</table>
</div>

<div id="original">
<table>
    <tr>
        <td colspan="3">
            <!--img src="http://lorempixum.com/500/100" /-->
            <div style="width:500px;height:100px;background:olive"></div>
        </td>
    </tr>
    <tr>
        <td>
            Hello
        </td>
        <td>
            World
        </td>
        <td>
            !
        </td>
    </tr>
</table>
</div>

CSS

table {
    border-collapse: separate;
}
td {
   border-top: dotted 1px black;
}
/*Uncomment the following, and notice that the `top-border` of the second ow disappears! */
/*#original td[colspan]{border-bottom: 1px dotted orange;}*/
/* Debugging styles below*/
#new, #original {
    position:absolute;
    top: 50px;
}
#original {
    display: none;
}
#original table {border-collapse:collapse;}
td:nth-child(2n){background:pink}

JavaScript

document.documentElement.onclick = function(){
    tog("display", "block", "none");
}
    function tog(prop, a, b){
        var OLD = document.getElementById("original").style;
        var NEW = document.getElementById("new").style;
        if(OLD[prop] != a){
            OLD.cssText = NEW.cssText = "";
            OLD[prop] = a;
            NEW[prop] = b;
        } else {
            OLD.cssText = NEW.cssText = "";
            OLD[prop] = b;
            NEW[prop] = a;
        }
    }