コピペで使える和風の表【CSS】※随時更新

基本理念などで使える和風の表

表示見本

HTML

<code><div class="container-greeting-a">
<p style="text-align: center;"><span class="veu_leadTxt">基本理念</span></p>
<div class="container-greeting-b">
	<div class="box-g-a">01</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">02</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">03</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">04</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">05</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">06</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
</div></code>

CSS

.container-greeting-a{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: column;
	background-color:#FFF;
	max-width:700px;
	padding: 1em;
	margin: 0 auto;
}
.container-greeting-b{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: row;
	background-color:#FFF;
	border-bottom: 1px solid #604c3e;
	margin:0 1em;
	align-items:center;
}
.box-g-a{
	margin:1em;
	font-size: 1.5em;
}
.box-g-b{
	
}
.box-g-c{
	padding: 1em 2em;
	min-width: 8em;
}
.box-g-d{
	padding: .3em .5em;
	min-width: 8em;
	border-top: 4px double #604c3e;
	border-bottom: 4px double #604c3e;
}
.box-g-e{
	padding: 1em 2em;
	min-width: 8em;
}

法人概要などで使える和風の表

表示見本

HTML

<div class="container-greeting-a">
<p style="text-align: center;"><span class="veu_leadTxt">法人概要</span></p>
<div class="container-greeting-b">
	<div class="box-g-c">法人名</div>
	<div class="box-g-c">株式会社〇〇◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-c">所在地</div>
	<div class="box-g-c">〒〇〇〇-〇〇〇◯　〇〇〇〇〇〇〇〇〇〇〇〇</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-c">電話番号</div>
	<div class="box-g-c"><a href="tel:00000000">〇〇-〇〇〇〇-〇〇〇〇</a></div>
</div>
<div class="container-greeting-b">
	<div class="box-g-c">FAX番号</div>
	<div class="box-g-c">〇〇-〇〇〇〇-〇〇〇〇</div>
</div>
	<div class="container-greeting-b">
	<div class="box-g-c">経営事業</div>
	<div class="box-g-c">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
	<div class="container-greeting-b">
	<div class="box-g-c">敷地面積</div>
	<div class="box-g-c">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
	<div class="container-greeting-b">
	<div class="box-g-c">建物面積</div>
	<div class="box-g-c">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
</div>

CSS

.container-greeting-a{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: column;
	background-color:#FFF;
	max-width:700px;
	padding: 1em;
	margin: 0 auto;
}
.container-greeting-b{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: row;
	background-color:#FFF;
	border-bottom: 1px solid #604c3e;
	margin:0 1em;
	align-items:center;
}
.box-g-c{
	padding: 1em 2em;
	min-width: 8em;
}

情報公開・定款一覧などで使える和風の表

表示見本

HTML

<div class="container-greeting-a">
<p style="text-align: center;"><span class="veu_leadTxt">情報公開</span></p>

	<div class="box-g-d">定款ダミー</div>
	<div class="box-g-e">定款（最終改正）</div>
	<div class="box-g-d">定款ダミー</div>
	<div class="box-g-e">定款（最終改正）</div>
	<div class="box-g-d">定款ダミー</div>
	<div class="box-g-e">定款（最終改正）</div>
</div>

CSS

.container-greeting-a{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: column;
	background-color:#FFF;
	max-width:700px;
	padding: 1em;
	margin: 0 auto;
}
.box-g-e{
	padding: 1em 2em;
	min-width: 8em;
}