Entfernen Sie die untere Polsterung vom Symbol für die Schriftart

Question

Ich versuche, die untere Polsterung von einem fantastischen Symbol für Schriftarten zu entfernen. Ich habe diese Antwort versucht , aber keinen Erfolg.

Hier ist ein Beispiel. Aufgrund dieser Auffüllung habe ich einen unerwünschten Abstand zwischen den beiden Tabellenzeilen (siehe Beispiel).

table {
  width: 100%;
  table-layout: fixed;
}

.firstrow > td {
    padding-top: 10px;
}

.datarow > td > div {
  overflow: hidden;
  padding-top: 5px;
  font-size: 16px;
}

.datarow > td > div > div {
  float: left;
  padding-right: 5px
}

    <script src="https://kit.fontawesome.com/de750115f0.js" crossorigin="anonymous"></script>

<table>
          <tr class="dx-theme-accent-as-text-color" style="font-weight: bold">
            <td>{{frc.version}}</td>
          </tr>
          <tr class="firstrow">
            <td>VA</td>
            <td>BA</td>
            <td>Bevétel</td>
          </tr>
          <tr class="datarow">
            <td>
              <div>
                <div>-10,25M€</div>
                <i class="fas fa-sort-up" style="font-size: 32px; color: #5cb85c;"></i>
              </div>
            </td>
            <td>
              <div>
                <div>-20,99M€</div>
                <i class="fas fa-sort-up" style="font-size: 32px; color: #d9534f;"></i>
              </div>
            </td>
            <td>
              <div>
                <div>175,52M€</div>
                <i class="fas fa-sort-up" style="font-size: 32px; color: #5cb85c;"></i>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div style="overflow: hidden; font-size: smaller;">
                <div style="float: left; color: #5cb85c">+0,45</div>
                <div style="float: left; padding: 0px 2px 0px 2px">/</div>
                <div style="float: left; color: #5cb85c">+1,25%</div>
              </div>
            </td>
            <td></td>
            <td></td>
          </tr>
        </table>

Wie kann ich das lösen?

BEARBEITEN: Ursprünglich habe ich den gesamten Code zu einem Snippet hinzugefügt, mich dann aber SO beschwert, dass der Beitrag nur Code ist. Jetzt füge ich diesen Text hinzu und hoffe, dass er ausreicht. Ich verstehe, dass SO einige Regeln hat, aber in der Vergangenheit habe ich es satt. Ich poste eine vollständige Frage mit Beispiel und es ist nicht gut genug.

Answer 1

Das Problem ist nicht Polsterung. Das Symbol nimmt den gesamten Platz ein. Verwenden Sie die absolute Positionierung

table {
  width: 100%;
  table-layout: fixed;
}

.firstrow > td {
    padding-top: 10px;
}

.datarow > td > div {
  overflow: hidden;
  padding-top: 5px;
  font-size: 16px;
}

.datarow > td > div > div {
  float: left;
  padding-right: 5px
}

<script src="https://kit.fontawesome.com/de750115f0.js" crossorigin="anonymous"></script>

<table>
          <tr class="dx-theme-accent-as-text-color" style="font-weight: bold">
            <td>{{frc.version}}</td>
          </tr>
          <tr class="firstrow">
            <td>VA</td>
            <td>BA</td>
            <td>Bevétel</td>
          </tr>
          <tr class="datarow">
            <td>
              <div>
                <div style='position:relative'>-10,25M€
                <i style='position:absolute;right:-25%;font-size: 32px; color: #5cb85c;' class="fas fa-sort-up" ></i></div>
              </div>
            </td>
            <td>
              <div>
                <div style='position:relative'>-20,99M€
                <i class="fas fa-sort-up" style='position:absolute;right:-25%;font-size: 32px; color:#d9534f;'></i></div>
              </div>
            </td>
            <td>
              <div>
                <div style='position:relative'>175,52M€
                <i class="fas fa-sort-up" style='position:absolute;right:-25%;font-size: 32px; color: #5cb85c;' ></i>
              </div></div>
            </td>
          </tr>
          <tr>
            <td>
            <div style="overflow: hidden; font-size: smaller;">
                <div style="float: left; color: #5cb85c">+0,45</div>
                <div style="float: left; padding: 0px 2px 0px 2px">/</div>
                <div style="float: left; color: #5cb85c">+1,25%</div>
              </div> 
            </td>
            <td></td>
            <td></td>
          </tr>
        </table>