Bootstrap Modalで動作していない疑似要素

Question

ブートストラップモードでこのスタイルでこの表を試してみましたが、列と行を強調表示するためには機能しません。 私はhtmlファイル本体の中でそれを使うと動作します。誰かが何か問題があるというヒントで私を助けることができますか？

のstyle.css

.custom-table-matrix-table { 
    border: solid 1px #DDEEEE; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

.custom-table-matrix-table thead th { 
    font-size: 12px; 
    background: #000000; 
    color: #ffffff; 
    text-align: center; 
} 
.custom-table-matrix-table tbody td { 
    border: solid 1px #DDEEEE; 
    color: #ffffff; 
    padding: 10px; 
} 


.custom-table-matrix-highlight { 
    overflow: hidden; 
    z-index: 1; 
} 
.custom-table-matrix-highlight tbody td, .custom-table-matrix-highlight thead th { 
    position: relative; 
} 
.custom-table-matrix-highlight tbody td:hover::before { 
    background-color: #CCE7E7!important; 
    content:'\00a0'!important; 
    height: 100%!important; 
    left: -5000px!important; 
    position: absolute!important; 
    top: 0!important; 
    width: 10000px!important; 
    z-index: -1!important; 
} 
.custom-table-matrix-highlight tbody td:hover::after { 
    background-color: #CCE7E7!important; 
    content:'\00a0'!important; 
    height: 10000px!important; 
    left: 0!important; 
    position: absolute!important; 
    top: -5000px!important; 
    width: 100%!important; 
    z-index: -1!important; 
} 

モーダルコード部分だけで、特定のクラスの:pseudo要素のスタイルを使用しているからだと

<!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     <table class="custom-table-matrix-highlight custom-table-matrix-table"> 
     <thead> 
     <tr> 
      <th>Week1</th> 
      <th>Week1</th> 
      <th>Week1</th> 
      <th>Week1</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     </tr> 
     <tr> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     </tr> 
     <tr> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     </tr> 
     <tr> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     </tr> 
     <tr> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     <td>25.00$</td> 
     </tr> 
     </tbody> 
     </table> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 

</div> 

Answer 1

の外側のテーブルのal。ここ

が更新フィドルhttps://jsfiddle.net/ggh9qox8/1/

Answer 2

クラスを使用しているあなたの代わりにモデルの一部でdivの内側にそれを使用するのではtable要素内で定義されている属性。

テーブル本体内でモデル本体を使用する必要があります。

<table class="modal-body custom-table-matrix-highlight custom-table-matrix-table"> 

修正する必要があります。