[css] table태그 colgroup으로 너비 맞추기

Sanghyeon Kim·2022년 9월 16일
0
<template>
  <div class="tab-wrap">
    <table>
      <colgroup>
        <col width="20%" />
        <col width="40%" />
        <col width="40%" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">구분</th>
          <th scope="col">태블릿</th>
          <th scope="col">스마트폰</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">상반기 판매수</th>
          <td>20,000</td>
          <td>50,000</td>
        </tr>
        <tr>
          <th scope="row">하반기 판매수</th>
          <td>30,000</td>
          <td>110,000</td>
        </tr>
      </tbody>
      <tfoot>
        <th scope="row">total</th>
        <td>50,000</td>
        <td>160,000</td>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
table {
  width: 100%;
}
tfoot td {
  text-align: center;
}
tbody tr td {
  text-align: center;
}
</style>

profile
프론트-둥

0개의 댓글