Edit in JSFiddle

<div class="row" data-activable data-delegate=">.cell">
    <div class="cell active">cell 1, behavior "1"</div>
    <div class="cell">cell 2, behavior "1"</div>
    <div class="cell">cell 3, behavior "1"</div>
</div>
<div class="row" data-activable="01" data-delegate=">.cell">
    <div class="cell">cell 1, behavior "01"</div>
    <div class="cell">cell 2, behavior "01"</div>
    <div class="cell">cell 3, behavior "01"</div>
</div>
<div class="row" data-activable="0X" data-delegate=">.cell">
    <div class="cell">cell 1, behavior "0X"</div>
    <div class="cell">cell 2, behavior "0X"</div>
    <div class="cell">cell 3, behavior "0X"</div>
</div>
<div class="row" data-activable="T" data-delegate=">.cell">
    <div class="cell">cell 1, behavior "T"</div>
    <div class="cell">cell 2, behavior "T"</div>
    <div class="cell">cell 3, behavior "T"</div>
</div>

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.row {
    display: table;
    width: 100%;
    margin: 0 0 15px;
}

.cell {
    display: table-cell;
    width: 32%;
    padding: 4px 8px;
    border-right: 3px solid #fff;
    background-color: #BBB;
    cursor: pointer; 
}

.cell.active {
    background-color: #7BD;
}