css - 减少两个 td 元素之间的空间

Question

• 我有以下 html 代码，我在其中更改了 bdg6x 字段的位置。 如何减少通常由 bdg6x 占用的 bdg4x 和 bdg0x 之间的差距？

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

标签： csscss-position

Answer 1

你必须摆脱第二个细胞。相反，把它放在第三个里面并使用绝对定位：

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