table row alternative

by danield770

HTML

<ul id=b></ul>

CSS

* {
    margin:0;
    padding:0;
}

#b {
    width:100%;
    list-style: none;
}
.m {
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    background: #789;
    border-top: thin solid #ccc;
}
.u {
    width: 100px;
    float:left;
    opacity:.999;
}
.u:before
{
    content: '';
    width: 100px;
    height: 100%;
    display: block;
    position: absolute;
    top:0;
    z-index:-1;
}
.c {
    overflow: hidden;
    width: calc(100% - 100px);
}

.u:hover:before, .c:hover {
    background: yellow;
}
.opener {
    width: 16px;
    text-align: center;
    cursor: pointer;
    color: red;
    
    left:0;right:0;
    bottom:0;
    margin: auto;
    z-index: 0;
    position: absolute;
}
.opener:before {
    content:'▼';
    display: block;
}

JavaScript

for (var i = 0; i < 100; i++) {
    var c = Array.apply(0, Array(1 + i % 5)).map(function (_, i) {
        return i
    }).join('<br>');
    $('<div class=m><div class=u>U' + i + '</div><div class=c>' + c + '</div><div class=opener></div></div>').appendTo('#b');
}