表格行中的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例子

请注意,!important此处的使用仅用于覆盖您应该不惜一切代价避免使用的内联CSS.