ลบช่องว่างด้านล่างออกจากไอคอนตัวอักษรที่น่ากลัว

Jan 13 2021

ฉันกำลังพยายามลบช่องว่างด้านล่างออกจากไอคอนแบบอักษรที่ยอดเยี่ยม ฉันพยายามตอบคำถามนี้แต่ไม่ประสบความสำเร็จ

นี่คือตัวอย่าง เนื่องจากช่องว่างภายในนี้ทำให้ฉันมีช่องว่างที่ไม่ต้องการระหว่างสองแถวของตาราง (ดูตัวอย่าง)

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 Jan 13 2021 at 04:09

ปัญหาไม่ใช่ช่องว่างภายใน ไอคอนใช้พื้นที่ทั้งหมดนั้น ใช้การกำหนดตำแหน่งที่แน่นอน

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>