테이블

<div class="krds-table-wrap">
	<table class="tbl col data">
		<caption>000에 대한 표로 제목1,제목2에 대한 내용으로 구성되어 있으며 제목1은 제목1-1,제목1-2,제목1-3으로 구성되어있다.</caption>
		<colgroup>
			<col style="width: 30%;">
			<col>
		</colgroup>
		<thead>
		<tr>
			<th scope="col">제목1</th>
			<th scope="col">제목2</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">제목1-1</th>
			<td>내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. </td>
		</tr>
		<tr>
			<th scope="row">제목1-2</th>
			<td>내용이 들어갑니다.</td>
		</tr>
		<tr>
			<th scope="row">제목1-3</th>
			<td>내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. </td>
		</tr>
		</tbody>
	</table>
</div>

<template>
  <div class="krds-table-wrap">
	<table class="tbl col data">
		<caption>000에 대한 표로 제목1,제목2에 대한 내용으로 구성되어 있으며 제목1은 제목1-1,제목1-2,제목1-3으로 구성되어있다.</caption>
		<colgroup>
			<col style="width: 30%;">
			<col>
		</colgroup>
		<thead>
		<tr>
			<th scope="col">제목1</th>
			<th scope="col">제목2</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">제목1-1</th>
			<td>내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. </td>
		</tr>
		<tr>
			<th scope="row">제목1-2</th>
			<td>내용이 들어갑니다.</td>
		</tr>
		<tr>
			<th scope="row">제목1-3</th>
			<td>내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. </td>
		</tr>
		</tbody>
	</table>
</div>
</template>

<script setup lang="ts">
// 테이블 컴포넌트
// 데이터 테이블 컴포넌트입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>