重要！表の横スクロール

スマホ表示時にはみ出してしまうような横長の表の横スクロール対応です。

<table> タグ毎、<div class=”tableScrollable”> </div> で囲います。

<table>タグ使用時には必ず確認して、スマホ表示時にはみ出す可能性がある場合は必ず使用してください。

コーディング例

				
					<div class="tableScrollable">
							<table class="table-typeAchievement w-100">
								<tr>
									<th>年度</th>
									<th>2020年</th>
									<th>2019年</th>
									<th>2018年</th>
									<th>2017年</th>
									<th>2016年</th>
								</tr>
								<tr>
									<th>麻酔科管理症例</th>
									<td>2014件</td>
									<td>2139件</td>
									<td>2169件</td>
									<td>2071件</td>
									<td>1934件</td>
								</tr>
								<tr>
									<th>全身麻酔</th>
									<td>1854件</td>
									<td>1936件</td>
									<td>1994件</td>
									<td>1823件</td>
									<td>1667件</td>
								</tr>
								<tr>
									<th>硬膜外麻酔</th>
									<td>128件</td>
									<td>136件</td>
									<td>269件　</td>
									<td>293件</td>
									<td>231件</td>
								</tr>
								<tr>
									<th>脊髄くも膜下麻酔</th>
									<td>153件</td>
									<td>189件</td>
									<td>172件</td>
									<td>236件</td>
									<td>276件</td>
								</tr>
								<tr>
									<th>神経ブロック</th>
									<td>451件</td>
									<td>563件</td>
									<td>572件</td>
									<td>511件</td>
									<td>558件</td>
								</tr>
							</table>
						</div>

tableScrollable を使用した場合

年度 2020年 2019年 2018年 2017年 2016年
麻酔科管理症例 2014件 2139件 2169件 2071件 1934件
全身麻酔 1854件 1936件 1994件 1823件 1667件
硬膜外麻酔 128件 136件 269件　 293件 231件
脊髄くも膜下麻酔 153件 189件 172件 236件 276件
神経ブロック 451件 563件 572件 511件 558件

tableScrollable を使用しない場合

年度 2020年 2019年 2018年 2017年 2016年
麻酔科管理症例 2014件 2139件 2169件 2071件 1934件
全身麻酔 1854件 1936件 1994件 1823件 1667件
硬膜外麻酔 128件 136件 269件　 293件 231件
脊髄くも膜下麻酔 153件 189件 172件 236件 276件
神経ブロック 451件 563件 572件 511件 558件

テーブルタイプ

実績表

				
					<table class="table-typeAchievement">
	<tr>
		<th>タイトル</th>
		<th>タイトル</th>
		<th>タイトル</th>
	</tr>
	<tr>
		<td>データ</td>
		<td>データ</td>
		<td>データ</td>
	</tr>
	<tr>
		<td>データ</td>
		<td>データ</td>
		<td>データ</td>
	</tr>
</table>
列見出し 列見出し
行見出し データ データ
行見出し データ データ

診療科以外のスタッフテーブル

				
					<table class="table-typeStaff">
	<tr>
		<th colspan="2"><h4>工藤 慶太　がんゲノム医療推進室長・医師（呼吸器科・呼吸器腫瘍内科医長併任） </h4></th>
	</tr>
	<tr>
		<td>医師</td>
		<td>7名</td>
	</tr>
	<tr>
		<td>薬剤師</td>
		<td>1名</td>
	</tr>
	<tr>
		<td>臨床検査技師</td>
		<td>1名</td>
	</tr>
</table>

工藤 慶太　がんゲノム医療推進室長・医師（呼吸器科・呼吸器腫瘍内科医長併任）

医師 7名
薬剤師 1名
臨床検査技師 1名

診療科以外のスタッフテーブルタイプ２

				
					<table class="table-typeStaff2">
	<tr>
		<th>氏名</th>
		<th>役職・職種</th>
		<th>資格等</th>
	</tr>
	<tr>
		<td>医師名</td>
		<td>役職名</td>
		<td>資格</td>
	</tr>
	<tr>
		<td>医師名</td>
		<td>役職名</td>
		<td>資格</td>
	</tr>
</table>
氏名 役職・職種 資格等
医師名 役職名 資格
医師名 役職名 資格

上のみヘッダーのテーブル

				
					<table class="table-typeTopHeader">
	<tr>
		<th>タイトル</th>
		<th>タイトル</th>
		<th>タイトル</th>
	</tr>
	<tr>
		<td>データ</td>
		<td>データ</td>
		<td>データ</td>
	</tr>
	<tr>
		<td>データ</td>
		<td>データ</td>
		<td>データ</td>
	</tr>
</table>
タイトルタイトルタイトル
データデータデータ
データデータデータ

左のみヘッダーのテーブル

				
					<table class="table-typeLeftHeader">
	<tr>
		<th>タイトル</th>
		<td>データ</td>
		<td>データ</td>
	</tr>
	<tr>
		<th>タイトル</th>
		<td>データ</td>
		<td>データ</td>
	</tr>
	<tr>
		<th>タイトル</th>
		<td>データ</td>
		<td>データ</td>
	</tr>
</table>
タイトルデータデータ
タイトルデータデータ
タイトルデータデータ

上と左にヘッダーのテーブル

				
					<table class="table-typeTopLeftHeader">
	<tr>
		<th>タイトル</th>
		<th>タイトル</th>
		<th>タイトル</th>
	</tr>
	<tr>
		<th>タイトル</th>
		<td>データ</td>
		<td>データ</td>
	</tr>
	<tr>
		<th>タイトル</th>
		<td>データ</td>
		<td>データ</td>
	</tr>
</table>
タイトルタイトルタイトル
タイトルデータデータ
タイトルデータデータ

その他のテーブル装飾

標準のボーダー

				
					<table class="border">

１列目は折り返さない

				
					<table class="nowrapCol-1">

３列目は折り返さない

				
					<table class="nowrapCol-3">

データ部は右寄せ

				
					<table class="tdRight">

タイトル部は中央揃え

				
					<table class="thCenter">