Apply css style to the entire row of a table

Navigation
0

I have a table with several rows and each row is divided into three columns, the amount is the least.

In the middle column I have a text, and in the columns on each side of that same row some icons of Font Awesome.

I need the font-weight: bold style; applies to the entire row, including the icons and not just the text.

How can I achieve this?

I add the code, you can also see it in CODEPEN 

td {
padding: 10px 0;
border: 2px solid #000;
text-align: center;
cell-spacing: none;
            }

tr:hover {
background-color: #ddd;
font-weight: bold;
        }

.far:hover {
font-weight: bold;
  
}
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <table style="width:100%">
    
 <tr>
   
 <td width="10%"><i class="far fa-file-word"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>

<tr>
   
 <td width="10%"><i class="far fa-file-pdf"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>
    
<tr>
   
 <td width="10%"><i class="far fa-file-excel"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>    

</table>
  
</body>
    
asked by Jheyman Mejia 05.10.2018 в 00:06
source

2 answers

2

I just played with the tr:hover selector for what you want: 

td {
padding: 10px 0;
border: 2px solid #000;
text-align: center;
cell-spacing: none;
}

tr:hover td,
tr:hover td .far{
 background-color: #ddd;
 font-weight: bold;
}
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <table style="width:100%">
    
 <tr>
   
 <td width="10%"><i class="far fa-file-word"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>

<tr>
   
 <td width="10%"><i class="far fa-file-pdf"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>
    
<tr>
   
 <td width="10%"><i class="far fa-file-excel"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>    

</table>
  
</body>

As you will see add tr:hover td and tr:hover td .fa , by that I mean that when the mouse is above the row at td and the element with the class .far places the font-weight: bold; .

I hope it's what you're looking for.

    
answered by 05.10.2018 / 00:20
source
2

This code can work for you, it's simple and fast, you tell me how it works for you. 

td {
padding: 10px 0;
border: 2px solid #000;
text-align: center;
cell-spacing: none;
}

tr:hover {
background-color: #ddd;
font-weight: bold;
}

tr:hover .far {
background-color: #ddd;
font-weight: bold;
}

CHECK THE CODE HERE (CODEPEN)

    
answered by 05.10.2018 в 00:23
How to solve the error in the switch / case? Java fill spaces of the "Border-Radius" - DIV