<div class="l-wrapper">

	<table>
		<thead>
			<tr>
				<td></td>
				<th>出身</th>
				<th>ポケモン</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>サトシ</th>
				<td data-label="出身">マサラタウン</td>
				<td data-label="ポケモン">ピカチュウ</td>
			</tr>
			<tr>
				<th>カスミ</th>
				<td data-label="出身">ハナダシティ</td>
				<td data-label="ポケモン">ヒトデマン</td>
			</tr>
			<tr>
				<th>タケシ</th>
				<td data-label="出身">ニビシティ</td>
				<td data-label="ポケモン">イワーク</td>
			</tr>
		</tbody>
	</table>

</div>
$sp : 500px;

.l-wrapper {
  @media screen and (max-width: $sp) {
    padding: 15px;
  }
}

//tableベース設定
table {
  border-collapse: collapse;
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  @media screen and (max-width: $sp) {
    border: none;
  }
  th,
  td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    @media screen and (max-width: $sp) {
      border: none;
    }
  }//th td
}//table
//===================tableベース設定

thead {
  @media screen and (max-width: $sp) {
    display: none;
  }
  tr {
    background: #eee;
  }
  th {
    padding: 1em;
  }
}//thead

tbody {
  tr {
    background-color: #fff;
    @media screen and (max-width: $sp) {
      display: block;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }//tr
  th,
  td {
    padding: 1em;
    vertical-align: middle;
  }//th td
  th {
    @media screen and (max-width: $sp) {
      background-color: #eee;
      display: block;
      border-right: none;
    }
  }//th
  td {
    @media screen and (max-width: $sp) {
      position: relative;
      display: block;
      padding-left: 6em;
      border-bottom: solid 1px #ccc;
    }
    &:before {
      @media screen and (max-width: $sp) {
        position: absolute;
        top: 1em;
        left: 10px;
        display: block;
        content: attr(data-label);
        font-weight: 600;
      }
    }
  }
}//tbody

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.