высота CSS в строке таблицы

Question

Попытка трудно найти, почему первый и второй ряды имеют высоту выше (выделены желтым цветом), чем остальные строки

<table class="table table-striped table-condensed table-hover"> 
    <thead> 
     <tr> 
      <th style="min-width: 44px;"></th> 
      <th>A</th> 
      <th>B</th> 
      <th>C</th> 
      <th>D</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="text-center" style="padding-top: 5px; width: 44px;"><span data-html="true" title="" data-placement="right" class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"></span><span style="position: relative; top: -15px; right: 0px; left: 16px;"><span style="font-family: RobotoCondensedRegular; font-size: 11px; color: #fff; text-align: center; display: inline-block; width: 20px; height: 20px; border: 2px solid #5cb85c; border-radius: 100%; background-color: #f0ad4e;">0</span></span></td> 
      <td>OOOOOOO</td> 
      <td>RRRR</td> 
      <td>DDDD</td> 
      <td>XZZZZZ</td> 
     </tr> 
     <tr> 
      <td class="text-center" style="padding-top: 5px; width: 44px;"><span data-html="true" title="" data-placement="right" class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"></span><span style="position: relative; top: -15px; right: 0px; left: 16px;"><span style="font-family: RobotoCondensedRegular; font-size: 11px; color: #fff; text-align: center; display: inline-block; width: 20px; height: 20px; border: 2px solid #5cb85c; border-radius: 100%; background-color: #f0ad4e;">0</span></span></td> 
      <td>OOOOOOO</td> 
      <td>RRRR</td> 
      <td>DDDD</td> 
      <td>XZZZZZ</td> 
     </tr> 
     <tr> 
      <td class="text-center" style="padding-top: 5px; width: 44px;"><span data-html="true" title="" data-placement="right" class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"></span><span style="position: relative; top: -15px; right: 0px; left: 16px;"></span></td> 
      <td>OOOOOOO</td> 
      <td>RRRR</td> 
      <td>DDDD</td> 
      <td>XZZZZZ</td> 
     </tr> 
     <tr> 
      <td class="text-center" style="padding-top: 5px; width: 44px;"><span data-html="true" title="" data-placement="right" class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"></span><span style="position: relative; top: -15px; right: 0px; left: 16px;"></span></td> 
      <td>OOOOOOO</td> 
      <td>RRRR</td> 
      <td>DDDD</td> 
      <td>XZZZZZ</td> 
     </tr> 
     <tr> 
      <td class="text-center" style="padding-top: 5px; width: 44px;"><span data-html="true" title="" data-placement="right" class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"></span><span style="position: relative; top: -15px; right: 0px; left: 16px;"></span></td> 
      <td>OOOOOOO</td> 
      <td>RRRR</td> 
      <td>DDDD</td> 
      <td>XZZZZZ</td> 
     </tr> 
    </tbody> 
</table> 

https://jsfiddle.net/gx1j03xc/

Попытка чтобы высота была как можно меньше (в том же случае, что и другие строки в порядке). Спасибо за помощь.

Answer 1

Дополнительное пространство предназначено для размещения тех круглых пролетов, которые у вас есть относительно позиционированы. Они все еще занимают свое первоначальное пространство, хотя и переставляют их.

Одно решение, чтобы дать им абсолютное позиционирование, а не так:

td { 
    position:relative; 
} 
td span:nth-child(2) { 
    position:absolute !important; 
    top: 17px !important; 
    right:-16px !important; 
} 

jsFiddle example

Обратите внимание, что использование !important здесь является только переопределить встроенный CSS, которые вы должны избегать при всех расходы.