Question

我有一个Angular Material表。我只想通过突出显示直到列头和从左到行头来突出显示表格单元格与列和行的交互。可以使用mat-table吗？

https://stackblitz.com/angular/gxbragvnead?file=src%2Fapp%2Ftable-sorting-example.ts

这是我尝试过的方法，但是由于mat-table处理列的方式而没有用。

tr:hover {
  background-color: #ffa;
}

td, th {
  position: relative;
}
td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

Answer 1

这是在悬停时相对于其行和列突出显示单元格的方式。

<html>

  <style>
  table {
   border-spacing: 0;
   border-collapse: collapse;
   overflow: hidden;
   background-color: white;
}

td, th {
   padding: 10px;
   position: relative;
}

tr:hover{
   background-color: rgba(255, 255, 0, 0.5);
}

td:hover::after,th:hover::after { 
   background-color: rgba(255, 255, 0, 0.5);
   content: '\00a0';  
   height: 10000px;    
   left: 0;
   position: absolute;  
   top: -5000px;
   width: 100%;   
}
</style>


<body>
  <table>
    <tr>
        <th></th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
    </tr>

    <tr>
        <th class="row">lore</th>
        <td>20</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
        <td>27</td>
    </tr>

    <tr>
        <th class="row">lore</th>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
        <td>26</td>
    </tr>

    <tr>
        <th class="row">lore</th>
        <td>17</td>
        <td>19</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
    </tr>

    <tr>
        <th class="row">lore</th>
        <td>16</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
    </tr>

</table>


</body>

</html>

<!DOCTYPE html>
<html>

  <style>
  table {
   border-spacing: 0;
   border-collapse: collapse;
   overflow: hidden;
   background-color: white;
}

td, th {
   padding: 10px;
   position: relative;
}

tr:hover{
   background-color: rgba(255, 255, 0, 0.5);
}

td:hover::after,th:hover::after { 
   background-color: rgba(255, 255, 0, 0.5);
   content: '\00a0';  
   height: 10000px;    
   left: 0;
   position: absolute;  
   top: -5000px;
   width: 100%;   
}
</style>


<body>
  <table>
    <tr>
        <th></th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
        <th>lore</th>
    </tr>

    <tr>
        <th class="row">lore</th>
        <td>20</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
        <td>27</td>
    </tr>

    <tr>
        <th class="row">lore</th>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
        <td>26</td>
    </tr>

    <tr>
        <th class="row">lore</th>
        <td>17</td>
        <td>19</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
    </tr>

    <tr>
        <th class="row">lore</th>
        <td>16</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
    </tr>

</table>





</body>






</html>

突出显示表格单元格与列和行的交互

1 个答案: