レスポンシブの表組み①

/* HTML */
<table>
  <tr>
    <th>項目名１</th>
    <td>内容１</td>
  <tr>
  <tr>
    <th>項目名２</th>
    <td>内容２</td>
  <tr>
  <tr>
    <th>項目名３</th>
    <td>内容３</td>
  <tr>
</table>

/* CSS */

table { width: 100%; }
th, td {
  line-height: 1.6;
  padding: .75em 1em;
}
th { background: #f5f5f5; }

/* 768pxまでの表示 */
@media (max-width: 768px) {
  table { 
    border-top: 1px #ccc solid; 
    border-right: 1px #ccc solid;
    border-left: 1px #ccc solid;
  }
  table th,
  table td {
    display: block;
    border-bottom: 1px #ccc solid;
    text-align: center;
  }
}

/* 769pxからの表示 */
@media (min-width: 769px) {
  table { table-layout: fixed; }
  th, td { border: 1px #ccc solid; }
  th { 
    width: 30%; /* 適宜変更 */
    text-align: left;
  }
}