JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<table class="fee_" width="100%" cellpadding="0" cellspacing="0" style="border-top:2px solid #69c4df;"><!--
								<tr>
									<th colspan="4" style="background:#fff; color:#333; font-size:18px; padding:15px 0; ">2023년 서비스가격 및 정부지원금 첫째아(초산)</th>	
								</tr>-->
								<tbody><tr style="background:#dcf4fb;">
								   <td colspan="3" style="border-bottom:1px solid #69c4df; font-weight:900; border-right:1px solid #bde5f0;">구분</td>
								   <td colspan="2" style="border-bottom:1px solid #69c4df; font-weight:900; border-right:1px solid #bde5f0;">단축</td>
								   <td colspan="2" style="border-bottom:1px solid #69c4df; font-weight:900; border-right:1px solid #bde5f0;">표준</td>
								   <td colspan="2" style="border-bottom:1px solid #69c4df;border-right:0; font-weight:900; border-right:0;">연장</td>
								</tr>
								<tr>
								   <th width="13%">태아유형</th>
								   <th width="10%">출산순위</th>
								   <th>소득유형</th>
								   <th>기간</th>
								   <th>본인부담금</th>
								   <th>기간</th>
								   <th>본인부담금</th>
								   <th>기간</th>
								   <th style="border-right:0;">본인부담금</th>
								</tr>
								<tr>
								   <th rowspan="9" style="border-bottom:0;">단태아</th>
								   <th rowspan="3">첫째아</th>
								   <td class="fee_t1">A-가-1</td>
								   <td class="fee_t1" rowspan="3">5일</td>
								   <td class="fee_t1">73,000</td>
								   <td class="fee_t1" rowspan="3">10일</td>
								   <td class="fee_t1">299,000</td>
								   <td class="fee_t1" rowspan="3">15일</td>
								   <td class="fee_t1" style="border-right:0;">671,000</td>
								</tr>
								<tr>
								   <td class="fee_t1">A-통합-1</td>
								   <td class="fee_t1">163,000</td>
								   <td class="fee_t1">462,000</td>
								   <td class="fee_t1" style="border-right:0;">893,000</td>
								</tr>
								<tr>
								   <td class="fee_t1">A-라-1</td>
								   <td class="fee_t1">276,000</td>
								   <td...

CSS

/*정부지원요금*/
.fee {  border-left:2px solid #fff; border-right:2px solid #fff; }
.fee th { font-size:15px; padding:8px 0; color:#000; border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; background:#f3f3f3; font-weight:700; }
.fee td { font-size:15px; padding:8px 0; color:#000; border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; font-weight:700; text-align:center; }
.fee td b { font-size:15px; color:#000; font-weight:800; }
.fee td span { font-size:15px; color:red; font-weight:800; }
.fee_t1 { font-size:15px !important; font-weight:400 !important; }

.fee_ {  border-left:2px solid #fff; border-right:2px solid #fff; }
.fee_ th { font-size:15px; padding:8px 0; color:#000; border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; background:#f3f3f3; font-weight:700; }
.fee_ td { font-size:15px; padding:8px 0; color:#000; border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; font-weight:700; text-align:center; }
.fee_ td b { font-size:15px; color:#000; font-weight:800; }
.fee_ td span { font-size:15px; color:red; font-weight:800; }

.fee2 { padding:25px 25px; font-size:17px; font-weight:400; color:#000; background:#f6f6f6; margin:20px auto; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; line-height:1.5em; }
.fee2 b { font-size:17px; color:#f23559; font-weight:800; }
.fee2 span { font-size:17px; color:#000; font-weight:800; }