PC ver.
Mobile ver.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
div {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
text-align: center;
line-height: 1.5;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 20px 10px;
}
table, th, td {
border-collapse: collapse;
border: 2px solid #444444;;
padding: 10px;
}
th {
background-color : lightgrey;
}
td#won {
text-align : right;
font-weight: 900;
}
</style>
</head>
<body>
<table>
<caption> <h1>계약서</h1></caption>
<thead>
<tr>
<th colspan="3">수주처</th>
<th colspan="3">발주처</th>
</tr>
</thead>
<tbody>
<tr>
<th>상호</th>
<td colspan="2">안녕하세요</td>
<th>상호</th>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<th>사업자 번호</th>
<td colspan="2">43534-56756</td>
<th>사업자 번호</th>
<td colspan="2">43534-56756</td>
</tr>
<tr>
<th>대표자명</th>
<td colspan="2">Dolor</td>
<th>대표자명</th>
<td colspan="2">Dolor</td>
</tr>
<tr>
<th>주소</th>
<td colspan="2">서울 강남 어쩌고 저쩌고</td>
<th>주소</th>
<td colspan="2">서울 강남 어쩌고 저쩌고</td>
</tr>
<tr>
<th>연락처</th>
<td colspan="2">010-23-3-3-</td>
<th>연락처</th>
<td colspan="2">010-380490</td>
</tr>
</tbody>
<table>
<thead>
<tr>
<br>
<tr>
<th>합계 금액 </th>
<td id="won" td colspan="6"> 2,000,000,000 원</b></td>
</tr>
<th>순번</th>
<th colspan="2">업체명</th>
<th>단가</th>
<th>양도 / 양수 조건</th>
<th>납기일자</th>
<th colspan="2">비고</th>
</tr>
<tr>
<td>1</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>4</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>5</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>7</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>8</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>9</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>10</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>11</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>12</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>13</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>14</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>15</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
<tr>
<td>16</td>
<td colspan="2">업체명은 길게 작성</td>
<td>50,000</td>
<td>50,000</td>
<td>50,000</td>
<td colspan="2">안녕하세요</td>
</tr>
</table>
</body>
</html>
</body>
</html>