<template>
  <table :class="$style.tableList">
    <CustomScrollbar :class="$style.customScroll">
      <thead :class="$style.thead">
        <slot name="thead"></slot>
      </thead>
      <tbody>
        <slot name="tbody"></slot>
      </tbody>
    </CustomScrollbar>
  </table>
</template>
<script>
export default {

}
</script>

<script>
export default {

}
</script>

<style module lang="scss">
.tableList {
  width: 100%;
  background-color: #fff;
  /* margin-top: 1rem; */
}
.thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
/* .tableList thead,
.tableList tbody {
  display: block;
}
.tableList tbody {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 34.2rem;
} */
.tableList th,
.tableList td {
  padding: 1.6rem 1rem;
  border-bottom: 1px #f1effd solid;
  vertical-align: middle;
  text-align: center;
  font-size: 1.4rem;
}
.tableList th {
  background-color: #e7e3fb;
  font-weight: bold;
}
.tableList tr:nth-child(even) td {
  background-color: #f8f7fe;
}
/*
.tableList__icon {
  min-width: 10rem;
  color: #fff;
  font-size: 1.3rem;
  border-radius: 3rem;
  text-align: center;
  padding: 0.3rem 0.5rem 0.2rem 0.5rem;
  display: inline-block;
}
.tableList__icon.-before {
  background-color: #725feb;
}
.tableList__icon.-remand {
  background-color: #cf7af1;
}
.tableList__icon.-finish {
  background-color: #7db3f2;
}
.tableList__icon.-rejection {
  background-color: #6fc9e8;
} */
@include mq-sp(){
.tableList td {
  padding: 2.15rem 1rem;
}
}
</style>
