[Vue.js] 테이블 예시

<template>
  <div>
    <table style="border-spacing: 0 15px; border-collapse: separate;">
      <colgroup span="12" class="columns"></colgroup>
      <tr>
        <th>No</th>
        <th>접수(등록)일시</th>
        <th>유입방식</th>
        <th>대표상태</th>
        <th>상세상태</th>
        <th>계약가능성</th>
        <th>성함</th>
        <th>매장명</th>
        <th>테이블수</th>
        <th>등록자</th>
        <th>최종수정자</th>
        <th>담당자</th>
      </tr>
      <tr>
        <td>USA</td>
        <td>Washington D.C.</td>
        <td>309 million</td>
        <td>English</td>
        <td>USA</td>
        <td>Washington D.C.</td>
        <td>309 million</td>
        <td>English</td>
        <td>USA</td>
        <td>Washington D.C.</td>
        <td>309 million</td>
        <td>English</td>
      </tr>
      <tr>
        <td>USA</td>
        <td>Washington D.C.</td>
        <td>309 million</td>
        <td>English</td>
        <td>USA</td>
        <td>Washington D.C.</td>
        <td>309 million</td>
        <td>English</td>
        <td>USA</td>
        <td>Washington D.C.</td>
        <td>309 million</td>
        <td>English</td>
      </tr>
    </table>
    <div class="center">
      <div class="pagination">
        <a href="#">&laquo;</a>
        <a href="#">1</a>
        <a href="#" class="active">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">&raquo;</a>
      </div>
    </div>
  </div>
</template>

<style scoped>

.table_header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(5px, auto);
  grid-gap: 10px;
  width: 100%;
}

th,
td {
  padding: 10px;
}

th {
  background: #eae8ef;
}

td {
  height: 3em;
  background: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.center {
  text-align: center;
}

.pagination {
  display: inline-block;
}

.pagination a {
  float: left;
  padding: 8px 16px;
  color: black;
  text-decoration: none;
}

.pagination a.active {
  color: white;
  background-color: #4caf50;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}

</style>