묶음 머리가 있는 표

항목을 2~3개 영역으로 묶어 보여 주는 과업·사양 표. 왼쪽 묶음 이름이 여러 행에 걸침. 묶음 2~3개, 전체 행 6~8개. 값 바꾸는 법: 묶음 마지막 행에 tr class="ge"(묶음 경계선), 묶음 첫 행에 tr class="g0"과 rowspan(묶음 안 행 수)을 가진 td.g를 둠. 행을 더하거나 빼면 rowspan과 "N개 과업" 숫자를 같이 고침. 마지막 묶음이 맨 아래 행까지 걸치지 않으면 CSS 마지막 줄의 nth-last-child 값을 조정.

증권사 리포트와 컨설팅 보고서의 묶음 행 표(묶음 경계만 진한 선, 묶음 안은 옅은 선). Maersk Design System Table https://designsystem.maersk.com/components/table/ (숫자 열 오른쪽 정렬, 행 높이 단계). 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-grp"><div class="dk-card"><table>
<colgroup><col style="width:150px"><col style="width:190px"><col><col style="width:250px"></colgroup>
<thead><tr><th>영역</th><th>과업</th><th>운영 기준</th><th>성과 기준</th></tr></thead>
<tbody>
<tr class="g0"><td class="g" rowspan="2"><b>검색</b><span>2개 과업</span></td><td class="k">검색 광고</td><td>키워드 640개, 입찰 일 2회 조정</td><td class="m">상담 신청 건수</td></tr>
<tr class=" ge"><td class="k">쇼핑 검색</td><td>상품 120종, 상품명 전수 정비</td><td class="m">구매 전환 비율</td></tr>
<tr class="g0"><td class="g" rowspan="3"><b>콘텐츠</b><span>3개 과업</span></td><td class="k">블로그</td><td>월 8건, 검색 상위 노출 목표</td><td class="m">검색 유입 수</td></tr>
<tr class=""><td class="k">숏폼 영상</td><td>월 4편, 15~30초</td><td class="m">끝까지 본 비율</td></tr>
<tr class=" ge"><td class="k">체험단</td><td>월 10명, 후기 원문 확보</td><td class="m">후기 누적 건수</td></tr>
<tr class="g0"><td class="g" rowspan="2"><b>측정</b><span>2개 과업</span></td><td class="k">전환 추적</td><td>신청 완료와 전화 연결 기록</td><td class="m">누락 비율 5% 이하</td></tr>
<tr class=" ge"><td class="k">현황 화면</td><td>매체 통합, 매일 오전 갱신</td><td class="m">갱신 지연 0회</td></tr>
</tbody></table></div></div>

.dk-grp table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-grp th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-grp td{font-size:var(--f-body);color:var(--ink2);padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-grp tbody tr:last-child td{border-bottom:0}
.dk-grp .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-grp .c{text-align:center}
.dk-grp td.k{font-weight:600;color:var(--ink)}
.dk-grp .dk-card{padding:20px 24px 12px}
.dk-grp td.g{vertical-align:top;padding-top:11px;border-bottom:1px solid var(--line2)}
.dk-grp td.g b{display:block;font-size:var(--f-md);font-weight:700;color:var(--ink);line-height:1.3}
.dk-grp td.g span{font-size:var(--f-cap);color:var(--mu)}
.dk-grp tr.ge td{border-bottom:1px solid var(--line2)}
.dk-grp tbody tr:last-child td,.dk-grp tbody tr:nth-last-child(2) td.g{border-bottom:0}
.dk-grp td.m{color:var(--ink);font-weight:500}
.dk-grp .dk-card{padding:18px 24px 8px}