harika yazı tipi simgesinden alt dolguyu kaldırın

Question

Harika bir font simgesinden alt dolguyu kaldırmaya çalışıyorum. Bu cevabı denedim ama başarılı olamadım.

İşte bir örnek. Bu doldurma nedeniyle, iki tablo satırı arasında istenmeyen bir boşluk var (örneğe bakın).

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>

Bunu nasıl çözebilirim?

DÜZENLEME: Başlangıçta tüm kodu bir parçaya ekledim, ancak daha sonra yazının yalnızca kod olduğundan şikayet etti. Şimdi bu metni ekliyorum, yeterli olacağını umuyorum. SO'nun bazı kuralları olduğunu anlıyorum, ama geçmişte bundan bıktım. Örnek içeren eksiksiz bir soru gönderiyorum ve bu yeterince iyi değil.

Answer 1

sorun dolgu değil. Simge tüm alanı kaplar. Mutlak konumlandırma kullanın

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>