usuń dolne wypełnienie z niesamowitej ikony czcionki
Jan 13 2021
Próbuję usunąć dolne wypełnienie z niesamowitej ikony czcionki. Próbowałem tej odpowiedzi, ale bez powodzenia.
Oto przykład. Z powodu tego wypełnienia mam niechciane odstępy między dwoma wierszami tabeli (patrz przykład).
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>
Jak mogę to rozwiązać?
EDYCJA: pierwotnie dodałem cały kod do fragmentu, ale potem SO narzekałem, że post to tylko kod. Więc teraz dodaję ten tekst, mając nadzieję, że to wystarczy. Rozumiem, że SO ma pewne zasady, ale w przeszłości mnie to znudziło. Zadaję pełne pytanie z przykładem i nie wystarczy.
Odpowiedzi
DCR Jan 13 2021 at 04:09
problem nie jest wypełnieniem. Ikona zajmuje całą tę przestrzeń. Użyj pozycjonowania bezwzględnego
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>