display: table-cell using only inner spacing between cells

by web5me

HTML

<ul>
    <li><div>foo<br/>foo</div></li>
    <li><div>foo<br/>foo</div></li>
    <li><div>foo<br/>foo<br/>bar</div></li>
</ul>

CSS

ul {
    width: 100%;
    display: table;
    table-layout: fixed; /* optional, for equal spacing */
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: none;
}
div {
    text-align: center;
    box-sizing: border-box;
    background-color: grey;
    height: 100%;
    min-height: 3.2em;
}
li + li div {
    border-left: 5px solid pink;
}