CODEWITHSUNDEEP
twitter-bootstrap-3vue-component
Agnibho Mondal
Agnibho Mondal

Reputation: 411

Bootstrap table css not working with Vue.JS component

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?

Upvotes: 8

Views: 3432

Answers (2)

Agnibho Mondal
Agnibho Mondal

Reputation: 411

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.

Upvotes: 20

Saurabh
Saurabh

Reputation: 73589

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.

Upvotes: 0

Related Questions