RWD <table> example

by hugogo7646

HTML

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

CSS

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