TEST DE TABLAS 2

by Emanuel Vecchio

HTML

<div class="table">
    <div class="row">
        <div class="col">xxx</div>
        <div class="col">xxx</div>
        <div class="col">xxx</div>
        <div class="col">xxx</div>
        <div class="col x">
            <img class="inline" src="http://placehold.it/503x20">
        </div>
        <div class="col">end</div>
    </div>
    <div class="row">
        <div class="col">xxx</div>
        <div class="col">xxx</div>
        <div class="col">xxx</div>
        <div class="x col"><img  class="block" src="http://placehold.it/503x20"></div>
        <div class="col">end</div>
    </div>
    <div class="row">
        <div class="col">xxx</div>
        <div class="col">xxx</div>
        <div class="col"><p class="inline">asdasdasd asd asdasd asd asd asd asd asd asd asdasd asdasasd asd asd asd asd asd sd asd asd asd asdasd</p></div>
        <div class="col">end</div>
    </div>
    <div class="row">
        <div class="col">xxx</div>
        <div class="col x">asdasdasd asd asdasd asd asd asd asd asd asd asdasd asdasasd asd asd asd asd asd sd asd asd asd asdasd</div>
        <div class="col">end</div>
    </div>
    <div class="row">
        <div class="col"><p class="block">asdasdasd asd asdasd asd asd asd asd asd asd asdasd asdasasd asd asd asd asd asd sd asd asd asd asdasd</p></div>
        <div class="col">end</div>
    </div>
    <div class="row">
        <div class="col x">asdasdasd asd asdasd asd asd asd asd asd asd asdasd asdasasd asd asd asd asd asd sd asd asd asd asdasd</div>
    </div>
</div>

CSS

.row {
    width: 100%;
    display: table;
}
.col {
    position: relative;
    min-height: 1px;
    border: 1px #000 solid;
    display: table-cell;
}
.a {
    min-width: 80px;
}
.x {
    background: #0cf;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
    max-width: 0;
}

.inline {
    display: inline;
}

.block {
    display: block; 
}