table-cells vs. inline-blocks

by jorgeluis

HTML

<h2>table, table-row, table-cell</h2>
<div class="table">
    <div class="table-row">
        <div class="table-cell">
            <label>Rows:</label>
            <select>
                <option>10</option>
                <option>50</option>
            </select>
        </div>

        <div class="table-cell">
            <label>Search:</label>
            <input type="search">
        </div>
        
        <nav class="table-cell">
	        <a href="#">Previous</a>
            <a href="#">Next</a>
        </nav>
            
    </div>
</div>

<h3>full-width table with nav</h3>
<div class="table table--full">
    <div class="table-row">
        <div class="table-cell">
            <label>Rows:</label>
            <select>
                <option>10</option>
                <option>50</option>
            </select>
        </div>

        <div class="table-cell">
            <label>Search:</label>
            <input type="search">
        </div>
        
        <nav class="table-cell pull-right">
	        <a href="#">Previous</a>
            <a href="#">Next</a>
        </nav>
            
    </div>
</div>


<div class="table">
    <div class="table-row">
        <div class="table-cell">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        </div>

        <div class="table-cell">
            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
        </div>

        <div class="table-cell">
            <img src="http://placehold.it/200" alt=""/> 
        </div>
    </div>
</div>

<h2>inline-blocks</h2>
<div class="ib-row">
    <div class="ib">
        <label>Rows:</label>
        <select>
            <option>10</option>
            <option>50</option>
        </select>
    </div>

    <div class="ib">
        <label>Search:</label>
        <input type="search">
    </div>
    
    <nav class="ib">
        <a href="#">Previous</a>
        <a href="#">Next</a>
    </nav>
            
</div>

<h3>inline-block row...

CSS

/* table display */
.table {
    display: table;
}
.table--full {
    width: 100%;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 1em;
}
.table-cell img {
}

/* ib = inline-blocks */
.ib {
    display: inline-block;
    box-sizing: border-box;
    padding: 1em;
    vertical-align: middle;
    
    /* optional max size */
    max-width: 20em;
}


/* utility classes */
.pull-right {
    float: right;
}

/* extra styles for visual only */
h2 { font-weight: bold }
.table, .ib-row {
    border-bottom: solid 1px #ccc;
    margin-bottom: 1em;
}
.table-cell:nth-child(odd), .ib:nth-child(odd) {
    background-color: #eee;
}