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。

表格行中的CSS高度

1 个答案: