我有一个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;
}
答案 0 :(得分:0)
这是在悬停时相对于其行和列突出显示单元格的方式。
<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>