<table class="rwd-table"> <tr> <th></th> <th>Very poor</th> <th>Poor</th> <th>Fair</th> <th>Good</th> <th>Very good</th> </tr> <tr> <td data-th="">Score 1 :</td> <td data-th="Very poor"><input type="radio" name="Score1"/></td> <td data-th="Poor"><input type="radio" name="Score1"/></td> <td data-th="Fair"><input type="radio" name="Score1"/></td> <td data-th="Good"><input type="radio" name="Score1"/></td> <td data-th="Very good"><input type="radio" name="Score1"/></td> </tr> <tr> <td data-th="">Score 1 :</td> <td data-th="Very poor"><input type="radio" name="Score2"/></td> <td data-th="Poor"><input type="radio" name="Score2"/></td> <td data-th="Fair"><input type="radio" name="Score2"/></td> <td data-th="Good"><input type="radio" name="Score2"/></td> <td data-th="Very good"><input type="radio" name="Score2"/></td> </tr> <tr> <td data-th="">Score 1 :</td> <td data-th="Very poor"><input type="radio" name="Score3"/></td> <td data-th="Poor"><input type="radio" name="Score3"/></td> <td data-th="Fair"><input type="radio" name="Score3"/></td> <td data-th="Good"><input type="radio" name="Score3"/></td> <td data-th="Very good"><input type="radio" name="Score3"/></td> </tr> </table>
/* normal table css */ table { border-collapse: collapse; border-spacing: 0; } table tr td, table tr th{ border : 1px solid black; } table tr:nth-child(even){ background-color : #d0aaaa; } /* rwd table css */ .rwd-table { overflow: hidden; } .rwd-table { min-width: 100%; } .rwd-table th { display: none; } .rwd-table td { display: block; } .rwd-table td:after { content: attr(data-th); display: inline-block; } .rwd-table th, .rwd-table td { text-align: left; } .rwd-table tr { margin-bottom: 5px; display: inline-block; width: 100%; } @media (min-width: 583px) { .rwd-table td:after { display: none; } .rwd-table th, .rwd-table td { display: table-cell; } .rwd-table tr { margin-bottom: 0px; display: table-row; } }