<template>
<div class="improvement-card">
<table style="border: 1px solid black;">
<thead>
<tr style="border: 1px solid black;">
<th colspan="4" rowspan="2" style="border: 1px solid black; padding: 8px; text-align: center;">개선 전후 카드</th>
<th style="border: 1px solid black; padding: 8px; text-align: center;">부서 / 본입조명</th>
<th colspan="4" style="border: 1px solid black; padding: 8px; width: 150px; text-align: center;"></th>
<th style="border: 1px solid black; padding: 8px; text-align: center;">작성</th>
<th style="border: 1px solid black; padding: 8px; text-align: center;">검토</th>
<th style="border: 1px solid black; padding: 8px; text-align: center;">승인</th>
</tr>
<tr>
<th style="border: 1px solid black; padding: 8px; text-align: center;">작성일자</th>
<th colspan="4" style="border: 1px solid black; padding: 8px; text-align: center;"></th>
<th style="border: 1px solid black; padding: 8px; text-align: center;"></th>
<th style="border: 1px solid black; padding: 8px; text-align: center;"></th>
<th style="border: 1px solid black; padding: 8px; text-align: center;"></th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2" class="improvement-title" style="border: 1px solid black; text-align: center; height: 40px;">개선내용</th>
<th colspan="11" style="border: 1px solid black; padding: 8px; text-align: center;"></th>
</tr>
<tr>
<td colspan="6" class="content-subheader" style="border: 1px solid black; width: 50%; padding: 8px; text-align: center;">개선전</td>
<td colspan="6" class="content-subheader" style="border: 1px solid black; width: 50%; padding: 8px; text-align: center;">개선후</td>
</tr>
<tr>
<td colspan="6" class="content-box" style="border: 1px solid black;">
<table class="inner-table">
<tr>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
</tr>
<tr>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
</tr>
</table>
</td>
<td colspan="6" class="content-box" style="border: 1px solid black;">
<table class="inner-table">
<tr>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
</tr>
<tr>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
<td class="inner-cell"></td>
</tr>
</table>
</td>
</tr>
<tr>
<th class="detail-title" style="border: 1px solid black; text-align: center;">내용</th>
<th colspan="5" style="border: 1px solid black;"></th>
<th class="detail-title" style="border: 1px solid black; text-align: center;">내용</th>
<th colspan="5" style="border: 1px solid black;"></th>
</tr>
<tr>
<td colspan="2" style="border: 1px solid black; width: 50%; padding: 8px; text-align: center;">개선전</td>
<td colspan="4" style="border: 1px solid black; padding: 8px; text-align: center;"></td>
<td colspan="2" style="border: 1px solid black; width: 20%; padding: 8px; text-align: center;">개선전</td>
<td colspan="4" style="border: 1px solid black; padding: 8px; text-align: center;"></td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
</script>
<style scoped>
.improvement-card {
width: 100%;
max-width: 60%;
margin: 0 auto;
}
table {
width: 100%;
border-collapse: collapse;
}
.content-header, .content-subheader {
background-color: #f0f0f0;
}
.content-box {
height: 300px;
}
.content-detail {
height: 150px;
}
.suggestion-header, .suggestion-no {
height: 50px;
}
.vertical-text {
padding: 0;
text-align: left;
vertical-align: middle;
}
/* 새로운 스타일 정의 */
.improvement-title {
width: 20%;
}
.detail-title {
width: 5%;
height: 140px;
}
.detail-title1 {
width: 15%;
height: 100px;
}
.inner-table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
.inner-cell {
width: 25%;
height: 50%;
border: 1px solid black;
padding: 8px;
box-sizing: border-box;
}
</style>
카페 게시글
웹표준 방특
양식
윤준형
추천 0
조회 44
24.08.02 20:42
댓글 0
다음검색