div
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Chat</title>
<style>
.plan{
border-radius:10px;
margin-left:3%;
width: calc(85% / 3);
/* width: 20%; */
/* border: solid 1px #333 ; */
}
.plan div{
/* margin-bottom:0.5rem; */
height:120px;
display: table;
margin: 0 auto;
padding:0 5px;
}
.plan p{
text-align:center;
vertical-align:middle;
display: table-cell;
}
a{
background-color: #25b327;
color: white;
padding:5px 10px;
border-radius: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div style="display:flex;">
<div class="plan" style="padding-top: 3px; width:15%;">
<div>
<p>
見出し見出し見出し
</p>
</div>
<div>
<p>
見出し
</p>
</div>
<div>
<p>
見出し
</p>
</div>
<div>
<p>
見出し
</p>
</div>
<div>
<p>
見出し
</p>
</div>
</div>
<div class="plan" style="border: solid 3px #99FF66; ">
<div>
<p style="color:#99FF66; font-size:1.5rem; font-weight: bold">
A
</p>
</div>
<div>
<p>
データ１データ１データ１
</p>
</div>
<div>
<p>
データ2<br>
<a href="#">申し込み</a>
</p>
</div>
<div style="display:flex; padding:0; ">
<div style="width:50%; border-right: solid 1px #99FF66;">
<p>
データ3
</p>
</div>
<div style="width:50%; border-left: solid 1px #99FF66;">
<p>
データ3-2データ3-2データ3-2
</p>
</div>
</div>
<div style="display:flex; padding:0; ">
<div style="width:50%; border-right: solid 1px #99FF66;">
<p>
データ4
</p>
</div>
<div style="width:50%; border-left: solid 1px #99FF66;">
<p>
データ4-2
</p>
</div>
</div>
</div>
<div class="plan" style="border: solid 3px #FF9966; ">
<div>
<p style="color:#FF9966; font-size:1.5rem; font-weight: bold">
B
</p>
</div>
<div>
<p>
データ１
</p>
</div>
<div>
<p>
データ2<br>
<a href="#">申し込み</a>
</p>
</div>
<div>
<p>
データ3
</p>
</div>
<div>
<p>
データ4
</p>
</div>
</div>
<div class="plan" style="border: solid 3px #99CCFF; ">
<div>
<p style="color:#99CCFF; font-size:1.5rem; font-weight: bold">
C
</p>
</div>
<div>
<p>
データ１
</p>
</div>
<div>
<p>
データ2<br>
<a href="#">申し込み</a>
</p>
</div>
<div>
<p>
データ3データ3データ3データ3データ3データ3
</p>
</div>
<div>
<p>
データ4
</p>
</div>
</div>
</div>
</body>
table
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSS Chat</title>
<style>
table{
/* border-collapse: collapse; */
border-spacing: 5px 0;
table-layout: fixed;
width:100%;
}
table th{
text-align: center;
padding: 7px 0;
width: calc(100% / 3);
}
table td{
text-align: center;
padding: 10px 5px;
width: calc(100% / 3);
height:100px;
}
table td a{
background-color: #25b327;
color: white;
padding:5px 20px;
border-radius: 30px;
font-weight: bold;
}
/* table tr:last-child{
border-bottom:solid 1px #99FF66;
} */
/* 縦１列目 */
table th:nth-child(1){
background-color:#99FF66;
}
table td:nth-child(1){
border-right:solid 1px #99FF66;
border-left:solid 1px #99FF66;
}
/* 縦２列目 */
table th:nth-child(2){
background-color:#f34955;
color: white;
}
table td:nth-child(2){
border-right:solid 1px #f34955;
border-left:solid 1px #f34955;
}
/* 縦３列目 */
table th:nth-child(3){
background-color:#f5b932;
color: white;
}
table td:nth-child(3){
border-right:solid 1px #f5b932;
border-left:solid 1px #f5b932;
}
/* 横２行目 */
table tr:nth-child(2) td{
font-size:1.2rem;
}
/* table .popular{
width: 180px;
} */
/* table th.popular{
position: relative;
} */
/* table th.popular span.inner{
position: absolute;
color:white;
background-color: #f34955;
left: 0;
bottom: 0;
display: block;
width: 180px;
padding: 10px 0;
} */
/* table tr *:nth-child(1){
background: #49c5f0;
} */
</style>
</head>
<body>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>¥0</td>
<td>¥5,000</td>
<td>¥8,000</td>
</tr>
<tr>
<td><a href="#">申し込み</a></td>
<td><a href="#">申し込み</a></td>
<td><a href="#">申し込み</a></td>
</tr>
<tr>
<td>データ１</td>
<td>データ１</td>
<td>データ１</td>
</tr>
<tr>
<td>
<div style="display:flex; height:100%;">
<div style="width:50%; text-align: center; padding:35px 0; border-right:solid 1px #99FF66">データ2</div>
<div style="width:50%; text-align: center; padding:35px 0; border-left:solid 1px #99FF66">データ2</div>
</div>
</td>
<td>データ2</td>
<td>データ2</td>
</tr>
<tr>
<td style="border-bottom:solid 1px #99FF66;">
<div style="display:flex;">
<div style="width:50%; text-align: center; border-right:solid 1px #99FF66">データ3</div>
<div style="width:50%; text-align: center; border-left:solid 1px #99FF66">データ3</div>
</div>
</td>
<td style="border-bottom:solid 1px #f34955;">データ3</td>
<td style="border-bottom:solid 1px #f5b932;">データ3データ２データ２データ２</td>
</tr>
</table>
</body>