CODEWITHSUNDEEP
csscss-position
Harvey
Harvey

Reputation: 145

Reduce space between two td elemnts

.comment {
    font-size: 10px;
    position: relative;
    left: 100px;
    top: -10px;
    color: red;
}
<table class='badges'>
    <tbody>
        <tr class=info>
            <td id='bdg41'>BADGE:</td>
            <td id='bdg61' class='comment'>0002699965046</td>
            <td id='bdg01'>000026999650:</td>
            <td id='bdg21'>(n°1)</td>
        </tr>
        <tr class=info>
            <td id='bdg42'>BIP:</td>
            <td id='bdg62' class='comment'>0004328048703</td>
            <td id='bdg02'>000043280487:</td>
            <td id='bdg22'>(n°2)</td>        
        </tr>
    </tbody>
</table>

pos_rel

Upvotes: 0

Views: 55

Answers (2)

Janitha Rasanga
Janitha Rasanga

Reputation: 1126

Try this

<td style="width:20%" id='bdg41'>BADGE:</td>

You can set suitable percentage for width. If you want, You can give min-width for td

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

You must get rid of the second cell. Instead, put it inside the third one and use absolute positioning:

.comment {
    position: relative;
}

.comment > span {
    display: inline-block;
    font-size: 10px;
    color: red;
    position: absolute;
    top: -6px;
    right: 5px;
}
<table class='badges'>
    <tbody>
        <tr class=info>
            <td id='bdg41'>BADGE:</td>
            <td id='bdg01' class='comment'><span>0002699965046</span>000026999650:</td>
            <td id='bdg21'>(n°1)</td>
        </tr>
        <tr class=info>
            <td id='bdg42'>BIP:</td>
            <td id='bdg02' class='comment'><span>0004328048703</span>000043280487:</td>
            <td id='bdg22'>(n°2)</td>        
        </tr>
    </tbody>
</table>

Upvotes: 3

Related Questions