cssでテーブルをレスポンシブルにする方法

<th>と<td>にdisplay: block;を指定

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	padding: 20px;
	line-height: 2.5;
	letter-spacing: 0.05em;
	}

.table th{
border-bottom: 1px solid #ddd;	}

td{
	border-bottom: 1px solid #ddd;
}
/*この辺は普通のテーブル調整*/

@media (max-width: 576px) {
.table th,
.table td {display: block;} /*レスポンシブテーブル！*/

.table th{
border-bottom: none; /*スマホ時、thの下線をなくす*/

}}