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?

I would, but I'm not sure how would I get the *.vue file to compile in the jsfiddle. — Agnibho Mondal
– Agnibho Mondal, Commented Nov 18, 2016 at 11:44

Agnibho Mondal · Accepted Answer · 2016-11-18 17:10:28Z

20

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.

answered Nov 18, 2016 at 17:10

Agnibho Mondal

4113 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurabh · Accepted Answer · 2016-11-18 13:24:59Z

0

I can see table working properly in Vue component. Following is code for table I am using:

 <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

Here is working fiddle.

answered Nov 18, 2016 at 13:24

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Collectives™ on Stack Overflow

Bootstrap table css not working with Vue.JS component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related