表組みパターン四種類

 

リスト1：チェックボックス

html

<ul class="list_1">
		<legend>条件</legend>
<li><label><input type="checkbox" name="a" value="1"><i class="fas fa-subway"></i>駅近</label></li>
	<li><label><input type="checkbox" name="b" value="2"><i class="fas fa-heart"></i>有給が多い</label></li>
	<li><label><input type="checkbox" name="c" value="3"><i class="fas fa-child"></i>託児あり</label></li>
	</ul>

css

/*汎用*/
ul{list-style:none;
padding:0;
margin:0 auto;}
ol{padding:0;
margin:0 auto;
}
.listsample{
	display:flex;
}
/*リスト1*/
[class^=list_]{
display:flex;
	flex-direction:column;
	
width:45%;
	border:none;
}

[class^=list_]>li{
	padding:0.85em;
	background-color:#ddd;
	border-radius:1em;
	margin-bottom: 0.85em;
	list-style-position:inside;
}

リスト2：ラジオボタン

html

<ol start="1" class="list_2">
		<legend>病院タイプ別</legend>
<li><label><input type="radio" name="a" value="1">大学病院</label></li>
	<li><label><input type="radio" name="b" value="2">総合病院</label></li>
	<li><label><input type="radio" name="c" value="3">個人委員</label></li>
	</ol>

表組1：ヘッダー上

html

<section class="hyougumi_1">

			 <dl><dt>関東</dt><dd>15万件</dd></dl>
			 <dl><dt>東北</dt><dd>5万件</dd></dl>
			 <dl><dt>中部</dt><dd>7万件</dd></dl>
			 <dl><dt>近畿</dt><dd>10万件</dd></dl>
			  <dl><dt>北海道</dt><dd>7万件</dd></dl>
			  <dl><dt>沖縄</dt><dd>6万件</dd></dl>
	

</section>

css

/*表組みヘッダー上タイプ*/
/*表組みのセル共通*/
.hyougumi_1 dl dt,.hyougumi_1 dl dd,.hyougumi_2 dl dt,.hyougumi_2 dl dd{
	padding:0.5em;
width:100%;
margin:0 auto;
}
/*ヘッダー部分共通*/
.hyougumi_1 dl dt,.hyougumi_2 dl dt{
	border-top:1px solid #ddd;
border-left:1px solid #ddd;
	border-right:1px solid #fff;
	border-bottom:1px solid #ddd;
background:#ddd;
}
.hyougumi_1 dl dt::last-child,.hyougumi_2 dl dt::last-child{
	border-left:1px solid #ddd;
}

.hyougumi_1 dl dd,.hyougumi_2 dl dd{
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
}
/*表1*/
.hyougumi_1{
	margin:0 auto;
	display:flex;
	width:90%;
}
.hyougumi_1 dl,{
width:16.666%;	
}

表組2：ヘッダー左

PCモニタだとヘッダーが左に、450px以下でヘッダーが上に変わります。

See the Pen oPEmbV by hassy (@kirikabu) on CodePen.