TEST DE TABLAS 3

by Emanuel Vecchio

HTML

INLINE REPLACED
<br/>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x">
            <img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidth" />
        </div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y">
            <img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidthPlusMaxWidth" />
        </div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x z">Intrinsic Width due white-space property set to nowap.</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y z">Intrinsic Width due white-space property set to nowap and Max-Width</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x"><span>IntrinsicWidthduenospacesintextandblahIntrinsicWidthduenospacesintextandblah</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y"><span>IntrinsicWidthduenospacesintextandMaxWidth</div>
        <div class="col">end</div>
    </div>
</div>
<br/>
INLINE NON REPLACED
<br/>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y">Non Intrinsic Width. Inline, non-replaced elements. <strong> Inline, non-replaced elements. </strong> Inline, non-replaced elements.</div>
        <div class="col">end</div>
    </div>
</div>

CSS

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