How to center an arrow in a table cell?

I would like to center the arrow on each cell, but I can’t do it.

.positive-arrow:before {
     content: "";
     border-style: solid;
     border-width: 5px 5px;
     border-color: transparent transparent #0dff00 transparent;
}

I tried with position: absolute; left: 65%;, but it’s diy….

.positive-arrow:before {
     content: "";
     border-style: solid;
     border-width: 5px 5px;
     border-color: transparent transparent #0dff00 transparent;
     position: absolute; 
     left: 65%;
}

Do you know a better solution in CSS, please?

Thank you

.w5 {
  width: 5%;
}


.w30 {
  width: 30%;
}

.positive-arrow:before {
     content: "";
     border-style: solid;
     border-width: 5px 5px;
     border-color: transparent transparent #0dff00 transparent;
}
 .negative-arrow:before {
     content: "";
     border-style: solid;
     border-width: 5px 5px;
     border-color: #f00 transparent transparent transparent; 

}
 
      
<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <body>
      <div class="card">
         <div class="card-body">
            <table class="table table-bordered">
               <thead>
                  <tr>
                     <th scope="col" class="w30">Indice</th>
                     <th scope="col" class="w30">Place</th>
                     <th scope="col" class="w5 text-center">Cours</th>
                     <th colspan="2" class="w5 text-center">Variation</th>
                     <th scope="col" class="w30 text-center">Date et heure</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>DAX Composite</td>
                     <td >EuroNext</td>
                     <td class="text-end">1 265,45</td>
                     <td class="text-end"> <span class="positive-arrow"></span></td>
                     <td class="text-end">1,50 %</td>
                     <td class="text-center">21/11/2022 - 17:55</td>
                  </tr>
                  <tr>
                     <td>DAX</td>
                     <td>EuroNext</td>
                     <td class="text-end">14 379,93</td>
                         <td class="text-end"> <span class="negative-arrow"></span></td>
                     <td class="text-end">3,40 %</td>
                     <td class="text-center">21/11/2022 - 17:55</td>
                  </tr>
                  <tr>
                     <td>Mid Cap DAX</td>
                     <td>EuroNext</td>
                     <td class="text-end">5 379,93</td>
                            <td class="text-end"> <span class="positive-arrow"></span></td>
                     <td class="text-end">1,40 %</td>
                     <td class="text-center">21/11/2022 - 17:55</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

>Solution :

You need to make your pseudo elements inline block and then if you want to horizontally center them, change the class on the td to text-center (instead of text-end). If you want to vertically center them, then you need to add vertical align middle to the td

.w5 {
  width: 5%;
}

.w30 {
  width: 30%;
}

.positive-arrow:before {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 5px 5px;
  border-color: transparent transparent #0dff00 transparent;
}

.negative-arrow:before {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 5px 5px;
  border-color: #f00 transparent transparent transparent;
}

.vertical-center {
  vertical-align: middle;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col" class="w30">Indice</th>
      <th scope="col" class="w30">Place</th>
      <th scope="col" class="w5 text-center">Cours</th>
      <th colspan="2" class="w5 text-center">Variation</th>
      <th scope="col" class="w30 text-center">Date et heure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DAX Composite</td>
      <td>EuroNext</td>
      <td class="text-end">1 265,45</td>
      <td class="text-center vertical-center"> <span class="positive-arrow"></span></td>
      <td class="text-end">1,50 %</td>
      <td class="text-center">21/11/2022 - 17:55</td>
    </tr>
    <tr>
      <td>DAX</td>
      <td>EuroNext</td>
      <td class="text-end">14 379,93</td>
      <td class="text-center vertical-center"> <span class="negative-arrow"></span></td>
      <td class="text-end">3,40 %</td>
      <td class="text-center">21/11/2022 - 17:55</td>
    </tr>
    <tr>
      <td>Mid Cap DAX</td>
      <td>EuroNext</td>
      <td class="text-end">5 379,93</td>
      <td class="text-center vertical-center"> <span class="positive-arrow"></span></td>
      <td class="text-end">1,40 %</td>
      <td class="text-center">21/11/2022 - 17:55</td>
    </tr>
  </tbody>
</table>

Leave a Reply