Bootstrap HTML/CSS Table with Bootstrap-Vue Input

bootstrap-table-example.vue

// Uses regular HTML tables with bootstrap CSS classes - https://getbootstrap.com/docs/4.1/content/tables/
// Uses VueJS bootstrap-4 b-form-textarea form input: https://bootstrap-vue.js.org/docs/components/form-textarea

<template>

<!-- div that makes table responsive with horizontal scrollbar on small screens -->
  <div class="table-responsive">
  
      <table class="table table-bordered">
        <!-- 
          <thead> = table head (as in the head row)
          <th> = table header cell
          <tr> = table row
          <td> = standard table cell
        -->
        
        <thead>
          <tr>
            <th>Column Header</th>
            <th>Column Header</th>
            <th class="text-center" colspan="2">
              Column Header Spans 2 Columns, Centered Text
            </th>
          </tr>
        </thead>
        
        <tr>
          <td>
            <b-form-textarea
              label="1."
              label-class="font-weight-bold"
              v-model="colOneTextArea"
              :rows="1"
              :max-rows="6"
              >
             </b-form-textarea>
           </td>
          <td>
            Column 2
          </td>
          <td>
            Column 3
          </td>
          <td>
            Column 4
          </td>
        </tr>
        
        <tr>
          <td>
            Column 1
          </td>
          <td>
            Column 2
          </td>
          <td>
            Column 3
          </td>
          <td>
            Column 4
          </td>
        </tr>
        
        <tr>
          <td>
            <b-form-textarea
              label="2."
              label-class="font-weight-bold"
              v-model="colTwoTextArea"
              :rows="1"
              :max-rows="6"
              >
             </b-form-textarea>
           </td>
          <td>
            Column 2
          </td>
          <td>
            Column 3
          </td>
          <td>
            Column 4
          </td>
        </tr>
        
        <tr>
          <td>
            Column 1
          </td>
          <td>
            Column 2
          </td>
          <td>
            Column 3
          </td>
          <td>
            Column 4
          </td>
        </tr>

      </table>
      
  </div>
  
</template>

<script>
export default {
  name: 'BootstrapTableExample'
}
</script>