css 横テーブルレスポンス対応

Posted 2021-05-13

<table id="safetyTable">
			<thead>
			<tr>
			<th>&nbsp;</th>
			<th>防犯ブザー<br>
            ケース</th>
			<th>ピカッと<br>
            ガード</th>
			<th>反射<br>
            シート</th>
			<th>トレナス<br>
            ちょこっとカン</th>
			<th>反射鋲<br>
            蓄光鋲</th>
			</tr>
			</thead>
			<tbody>
			<tr>
			<td>べすと</td>
			<td>別売り</td>
			<td>●雨カバー</td>
			<td>●</td>
			<td>●</td>
			<td>●</td>
			</tr>
			<tr>
			<td>プリンス</td>
			<td>別売り</td>
			<td>●雨カバー</td>
			<td>●</td>
			<td>●</td>
			<td>●</td>
			</tr>
			<tr>
			<td>ロイヤル</td>
			<td>別売り</td>
			<td>●クリアカバー</td>
			<td>●</td>
			<td>●</td>
			<td>●</td>
			</tr>
			<tr>
			<td>きらり</td>
			<td>別売り</td>
			<td>&nbsp;</td>
			<td>●</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			</tr>
			</tbody>
		</table>

#safetyTable th {
    background-color: #553820;
    padding: 15px 0;
    width: 10%;
    border: 1px solid #ddd;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
}

#safetyTable td {
    padding: 15px 0;
    text-align: center;
    border: 1px solid #ddd;
}

#safetyTable td:first-child {
    text-align: center;
    padding: 10px 0;
    font-weight: bold;
}

#safetyTable {
    display: block;
    width: 100%;
    margin: 0 -10px;
}

#safetyTable thead{
    display: block;
    float: left;
    overflow-x:scroll;
}

#safetyTable tbody{
    display: block;
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
}

#safetyTable th{
    display: block;
    width: auto;
    padding: 15px 10px;
}

#safetyTable tbody tr{
    display: inline-block;
    margin: 0 -3px;
}

#safetyTable td {
	vertical-align: middle;
    display: block;
    padding: 30px 10px;
}

#safetyTable td:first-child {
	height: 56px;
}

#safetyTable td:not(:first-child) {
	height: 80px;
}