How to center an arrow in a table cell?-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <body>
      <div >
         <div >
            <table >
               <thead>
                  <tr>
                     <th scope="col" >Indice</th>
                     <th scope="col" >Place</th>
                     <th scope="col" >Cours</th>
                     <th colspan="2" >Variation</th>
                     <th scope="col" >Date et heure</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>DAX Composite</td>
                     <td >EuroNext</td>
                     <td >1 265,45</td>
                     <td > <span ></span></td>
                     <td >1,50 %</td>
                     <td >21/11/2022 - 17:55</td>
                  </tr>
                  <tr>
                     <td>DAX</td>
                     <td>EuroNext</td>
                     <td >14 379,93</td>
                         <td > <span ></span></td>
                     <td >3,40 %</td>
                     <td >21/11/2022 - 17:55</td>
                  </tr>
                  <tr>
                     <td>Mid Cap DAX</td>
                     <td>EuroNext</td>
                     <td >5 379,93</td>
                            <td > <span ></span></td>
                     <td >1,40 %</td>
                     <td >21/11/2022 - 17:55</td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table >
  <thead>
    <tr>
      <th scope="col" >Indice</th>
      <th scope="col" >Place</th>
      <th scope="col" >Cours</th>
      <th colspan="2" >Variation</th>
      <th scope="col" >Date et heure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DAX Composite</td>
      <td>EuroNext</td>
      <td >1 265,45</td>
      <td > <span ></span></td>
      <td >1,50 %</td>
      <td >21/11/2022 - 17:55</td>
    </tr>
    <tr>
      <td>DAX</td>
      <td>EuroNext</td>
      <td >14 379,93</td>
      <td > <span ></span></td>
      <td >3,40 %</td>
      <td >21/11/2022 - 17:55</td>
    </tr>
    <tr>
      <td>Mid Cap DAX</td>
      <td>EuroNext</td>
      <td >5 379,93</td>
      <td > <span ></span></td>
      <td >1,40 %</td>
      <td >21/11/2022 - 17:55</td>
    </tr>
  </tbody>
</table>