<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; }