Name/Value Table

A table with name column auto-shrink (with max-width) and value column filling the remaining space. Support "overflow: ellipsis" for name column.

by sstur

HTML

<h3>Table One</h3>
<div class="container">
    <div class="list">
        <div class="list-item">
            <div class="name"><div class="wrap">Run</div></div>
            <div class="value"><div class="wrap">Lorem_ipsum_dolor_sit_amet_consectetur_adipiscing_elit_Integer_pretium_dui_nec_enim_vulputate_vel_hendrerit_nibh_condimentum_Sed_semper_felis_at_mollis_laoreet_dolor_nibh_tempor_elit_a_sollicitudin_nibh_neque_ac_dui_Vestibulum_commodo_vestibulum_cursus.</div></div>
        </div>
        <div class="list-item">
            <div class="name"><div class="wrap">Options</div></div>
            <div class="value"><div class="wrap">In ut odio vel velit sollicitudin bibendum non cursus tellus. Vivamus aliquam nisi dui, in vestibulum lorem consectetur eget.</div></div>
        </div>
        <div class="list-item">
            <div class="name"><div class="wrap">Languages</div></div>
            <div class="value"><div class="wrap">In magna enim, placerat id tincidunt id, ornare et orci. Donec laoreet nibh ac libero venenatis, sit amet interdum est faucibus.</div></div>
        </div>
        <div class="list-item">
            <div class="name"><div class="wrap">Collaboration</div></div>
            <div class="value"><div class="wrap">Vestibulum convallis, elit vitae dapibus sagittis, felis libero consectetur mauris, quis condimentum massa ligula at purus.</div></div>
        </div>
        <div class="list-item">
            <div class="name"><div class="wrap">Legal and Credits</div></div>
            <div class="value"><div class="wrap"><img src="http://placehold.it/500x100" width="500" height="100" /></div></div>
        </div>
    </div>
</div>
<h3>Table Two</h3>
<div class="container">
    <div class="list">
        <div class="list-item">
            <div class="name"><div class="wrap">A</div></div>
            <div class="value"><div...

CSS

body {
    font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.container {
    width: 400px;
    background: #f1f1f1;
    border: 1px solid #999;
    border-top: 0;
}
.list {
    display: table;
    width: 100%;
}
.list-item {
    display: table-row;
}
.list .name {
    display: table-cell;
    width: 1%;
    vertical-align: top;
}
.list .value {
    display: table-cell;
    width: 99%;
    max-width: 0;
}
.list .wrap {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 1px solid #999;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
}
.list .name .wrap {
    max-width: 90px;
    white-space: nowrap;
}
.list .value .wrap {
    border-left: 1px solid #999;
}