CODEWITHSUNDEEP
htmlcss
Khrys
Khrys

Reputation: 2774

CSS height in a table row

Trying hard to find why the first and the second rows have height higher (highlighted in yellow) than the other rows

enter image description here

<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/

Trying to keep the height as small as possible (in the same case as the other rows is ok). Thanks for the help.

Upvotes: 1

Views: 89

Answers (1)

j08691
j08691

Reputation: 207861

The extra space is to accommodate those circular spans you have that are relatively positioned. They still take up their original space even though to re-position them.

One solution is to give them absolute positioning instead like so:

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

jsFiddle example

Note that the use of !important here is only to override your inline CSS which you should avoid at all costs.

Upvotes: 6

Related Questions