Bootstrap table css not working with Vue.JS component

Question

I'm using bootstrap and Vue.js for a webapp. But I can't use bootstrap table css in a Vue component. When I write

<table>
  <tr class='active'>
    <td>place</td>
    <td>holder</td>
  </tr>
</table>

outside Vue component the css works okay and the table is properly formatted. But when I use the same code within <template>...</tenplate> tag of the Vue component, the active style of bottstrap table css is not applied to the table row.

I am keeping the Vue component in a .vue file and compiling with webpack.

What's going wrong?

Answer 1

Adding a tbody element to the table solved the problem. The code now reads

<table>
  <tbody>
    <tr class='active'>
      <td>place</td>
      <td>holder</td>
    </tr>
  </tbody>
</table>

The CSS is working properly now.