Home / Questions / 202085
Accepted
Jheyman Mejia
Asked: 2020-10-05 14:06:17 +0800 CST 2020-10-05 14:06:17 +0800 CST

Apply css styling to the entire row of a table

  • 772

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

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

I need the style font-weight: bold; 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>

css

2 Answers

  1. Best Answer

    I just played with the selector tr:hoverfor 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 tdand tr:hover td .fa, by that I mean that when the mouse is above the row to tdand to the element that has the class .farI put the font-weight: bold;.

    I hope it is what you are looking for.

    • 2

  2. This code can work for you, it is simple and fast, 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)

    • 2