responsive table

table.vue

<template>
  <div>
    <div class="div1">
      <table id="table1">
        <tr>
          <th>One</th>
          <th>Two</th>
          <th>Three</th>
        </tr>
      </table>

    </div>


    <div class="div2">
      <table id="table2">
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
        <tr>
          <td>c1</td>
          <td>c2</td>
          <td>c3</td>
        </tr>
      </table>
    </div>
  </div>

</template>

<script>
import { API } from "@/services.js"

export default {
  data() {
    return {}
  },
  mounted() {
  },
  beforeMount() {},
  methods: {},
}
</script>

<style lang="css" scoped>
.div1 {
  height: 25px;
}

#table1 {
  background-color: red;
}

.div2 {
  height: 100px;
  overflow: auto;
}

#table2 {
  height: 100%;
}


/* .ccc {
  heigth: 189px;
} */

</style>