<template>
  <TableList>
    <template #thead>
      <tr>
        <th :class="$style.th">
          日付
        </th>
        <th :class="$style.th">
          再生数
        </th>
        <th :class="$style.th">
          申請日
        </th>
      </tr>
    </template>
    <template #tbody>
      <tr v-for="index in 5" :key="index">
        <td :class="$style.td">
          2022/3/1
        </td>
        <td :class="$style.td">
          1.5万回
        </td>
        <td :class="$style.td">
          ￥300,000
        </td>
      </tr>
    </template>
    </TableLinkList>
  </tablelist>
</template>
<script>
export default {

}
</script>

<style module lang="scss">

.th:nth-child(1){
  /* width: calc((100% - 15rem) / 3); */
}

.th:nth-child(2){
  /* width: calc((100% - 10rem) / 3); */
}

.th:nth-child(3){
  /* width: calc((100% - 10rem) / 3); */
}

.th:nth-child(4){
  width: 10rem;
}

.td{
  text-align: center;
}

.avatar{
  display:flex;
  justify-content:center;
}

.wrapper{
  @include mq-pc {
  }
  @include mq-sp {

  }
}
</style>
