ほんっとにはじめてのHTML5とCSS3

表示領域の幅が狭くなると、テーブルが 1カラムになるよう CSSで指定しています。
PCのかたは、ウィンドウ幅を小さくしてみてください。

サンプルのHTML

<table class="sample1">
<thead>
  <tr>
    <th>エリア</th>
    <th>店舗名</th>
    <th>来店総数</th>
    <th>新規来店</th>
    <th>リピート</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <th colspan="2">合計</th>
    <td aria-label="来店総数">1150</td>
    <td aria-label="新規来店">780</td>
    <td aria-label="リピート">370</td>
  </tr>
</tfoot>
<tbody class="areaA">
  <tr>
    <th rowspan="3">A</th>
    <td aria-label="店舗名　">渋谷店</td>
    <td aria-label="来店総数">100</td>
    <td aria-label="新規来店">80</td>
    <td aria-label="リピート">20</td>
  </tr>
  <tr>
    <td aria-label="店舗名　">神宮前店</td>
    <td aria-label="来店総数">150</td>
    <td aria-label="新規来店">100</td>
    <td aria-label="リピート">50</td>
  </tr>
  <tr>
    <td aria-label="店舗名　">青山店</td>
    <td aria-label="来店総数">200</td>
    <td aria-label="新規来店">120</td>
    <td aria-label="リピート">80</td>
  </tr>
</tbody>
<tbody class="areaB">
  <tr>
    <th rowspan="2">B</th>
    <td aria-label="店舗名　">三軒茶屋店</td>
    <td aria-label="来店総数">100</td>
    <td aria-label="新規来店">80</td>
    <td aria-label="リピート">20</td>
  </tr>
  <tr>
    <td aria-label="店舗名　">二子玉川店</td>
    <td aria-label="来店総数">150</td>
    <td aria-label="新規来店">100</td>
    <td aria-label="リピート">50</td>
  </tr>
</tbody>
<tbody class="areaC">
  <tr>
    <th rowspan="3">C</th>
    <td aria-label="店舗名　">銀座店</td>
    <td aria-label="来店総数">200</td>
    <td aria-label="新規来店">120</td>
    <td aria-label="リピート">80</td>
  </tr>
  <tr>
    <td aria-label="店舗名　">日本橋店</td>
    <td aria-label="来店総数">100</td>
    <td aria-label="新規来店">80</td>
    <td aria-label="リピート">20</td>
  </tr>
  <tr>
    <td aria-label="店舗名　">京橋店</td>
    <td aria-label="来店総数">150</td>
    <td aria-label="新規来店">100</td>
    <td aria-label="リピート">50</td>
  </tr>
</tbody>
</table>

サンプルのCSS

table.sample1 {
	width: 100%;
	margin:1em 0 4em;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-spacing:0px;
	}
table.sample1 tr th,table.sample1 tr td {
	text-align: center;
	font-size: 12px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 3px;
	}
table.sample1 thead tr {
	background: #c7ebc9;
	}
table.sample1 tfoot tr {
	background: #86bd7e;
	color:#fff;
	}
table.sample1 tbody.areaA tr {
	background: #ffc;
	}
table.sample1 tbody.areaB tr {
	background: #e1f7fa;
	}
table.sample1 tbody.areaC tr {
	background: #ffe9da;
	}
	
@media screen and (max-width: 600px) {  /*ここからメディアクエリ*/
table.sample1 {
	border:none
	}
table.sample1 thead {
	display: none;   /*theadは非表示に*/
	}
table.sample1 tr {
	display: block;  /*trをブロックレベルに*/
	margin-bottom:.5em;
	border-bottom:1px solid #ccc;
	box-shadow:0 2px 2px #ddd;
	}
table.sample1 tr td {
	display:block;  /*tdをブロックレベルに（セルをやめる）*/
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom:none;
	}
table.sample1 tr td::before {   /*tdに擬似要素 ::before*/
	content: attr(aria-label);  /*aria-label属性の値をコンテンツに*/
	float: left;                /*テキストを左寄せにする*/
	font-weight:bold;
	padding-left:.7em
	}
table.sample1 tr td::after {   /*クリアフィックス（コレは不要かもしれません）*/
	content:"";
	display:table;
	clear:both;
	}
table.sample1 tbody th {
	display:block;  /*tbody内の thをブロックレベルに（セルをやめる）*/
	border:none;
	background:#666;
	color:white
	}
table.sample1 tbody th::before {
	content:"エリア"  /*tbody内の thの前に エリア と追加*/
	}
table.sample1 tbody.areaA th {
	color: #ffc
    }
table.sample1 tbody.areaB th {
	color: #e1f7fa
    }
table.sample1 tbody.areaC th {
	color: #ffe9da
    }
table.sample1 tfoot th {
	display:block;
	border:none;
	}
table.sample1 tfoot td {
	border-top-color:white
	}
}

CSS 58行目で、クリアフィックスの指定をしています。
疑似要素 ::before で作ったコンテンツに float を使ったので、一応クリアをしていますが、このサンプルの場合、<td>内に十分スペースがありますので、float で 親要素の崩壊や、他の要素への影響は無いため、このクリアフィックスは不要かもしれません。
上のソースの場合でも、float させるコンテンツに「display: block」と「width」を指定した場合は クリアフィックスは必要です。