<template>
    <div>
        <!-- <table class="gantt">
            <thead>
                <tr>
                    <td v-for="i in chartHead" :key="i">{{i}}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data" :key="item">
                    <td v-for="i in chartHead" :key="i" :style="{
                        backgroundColor: i>=item.begin&&i<=item.end ?'red':'white'
                    }">&nbsp;</td>
                </tr>
            </tbody>
        </table> -->
        <table class="gantt">
            <thead>
                <tr>
                    <td v-for="i in chartHead" :key="i">{{i}}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data" :key="item">
                    <td v-for="i in chartHead" :key="i" :style="{
                        backgroundColor: i>=item.begin&&i<=item.end ?'red':'white'
                    }">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script lang="ts">
import Vue from "vue";
import dayjs from "dayjs";

console.log(dayjs().daysInMonth());

export default Vue.extend({
  props: {},
  data() {
    return {
      tableHead: [],
      chartHead: [1, 2, 3, 5, 6],
      data: [{ begin: 2, end: 5 }, { begin: 1, end: 3 }, { begin: 2, end: 5 }]
    };
  }
});
</script>
<style lang="scss" scoped>
$border: 1px solid black;
table.gantt {
  border-spacing: 0;
  border: $border;
  border-bottom: 0;
  td {
    border-bottom: $border;
  }
  thead td + td {
    border-left: $border;
  }
  td + td {
    border-bottom: $border;
  }
}
</style>

