Question

我在Bootstrap Modal上尝试使用此样式的此表，但它不能突出显示列和行。如果我在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;
}

模态代码部分

  <!-- 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

它是因为您仅将:pseudo元素的样式用于模式之外的表的特定类。

这里是更新的小提琴https://jsfiddle.net/ggh9qox8/1/

Answer 2

使用您在table元素中定义的class属性，而不是在Model部分的div中使用它。

您应该在表格元素中使用模型主体。

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

应该修理它。

伪元素在Bootstrap Modal上不起作用

2 个答案: