ブートストラップテーブルCSSがVue.JSコンポーネントで動作しません

Question

私はブートストラップとVue.jsをWebアプリケーションに使用しています。しかし、私はVueコンポーネントでブートストラップテーブルCSSを使用することはできません。私が書いたときには、Vueコンポーネントの外側では、CSSは正常に動作し、テーブルのフォーマットは正しく行われています。

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

しかし、Vueコンポーネントの<template>...</tenplate>タグ内で同じコードを使用すると、activeのボトムストラップテーブルCSSのスタイルはテーブル行に適用されません。

私はVueコンポーネントを.vueファイルに保存し、webpackでコンパイルしています。

どうなりますか？

Answer 1

テーブルにtbody要素を追加すると問題が解決しました。コードが読み取られる

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

CSSが正しく動作しています。

Answer 2

Vueコンポーネントでテーブルが正しく動作しているのがわかります。以下は、私が使用しているテーブルのコードです：

<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>mary@example.com</td> 
     </tr> 
     <tr> 
     <td>July</td> 
     <td>Dooley</td> 
     <td>july@example.com</td> 
     </tr> 
    </tbody> 
    </table> 

ここでは動作していますfiddleです。