फ़ॉन्ट भयानक आइकन से नीचे गद्दी निकालें
मैं एक फ़ॉन्ट भयानक आइकन से नीचे पैडिंग को हटाने की कोशिश कर रहा हूं। मैंने इस उत्तर की कोशिश की , लेकिन कोई सफलता नहीं मिली।
यहाँ एक उदाहरण है। इस गद्दी के कारण मेरे पास दो तालिका पंक्तियों के बीच एक अवांछित स्थान है (उदाहरण देखें)।
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>
मैं इसे कैसे सुलझाऊं?
संपादित करें: मूल रूप से मैंने एक स्निपेट में सभी कोड जोड़े, लेकिन फिर एसओ ने शिकायत की, कि पोस्ट सिर्फ कोड है। इसलिए अब मैं इस पाठ को जोड़ रहा हूँ, आशा करता हूँ, कि यह पर्याप्त होगा। मैं समझता हूं, कि SO के कुछ नियम हैं, लेकिन पिछले समय में मैं इससे थक गया था। मैं उदाहरण के साथ एक पूरी तरह से सवाल पोस्ट करता हूं और यह काफी अच्छा नहीं है।
जवाब
DCR
समस्या पैडिंग नहीं है। आइकन उस सभी स्थान पर रहता है। पूर्ण स्थिति का उपयोग करें
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>