CODEWITHSUNDEEP
htmlcss
Dror
Dror

Reputation: 177

Width of cells of table

Why does a table with 2 cells, one is an image and the other is text. When I change the text length it affect the size of the image?

There's a code with 2 tables that the text length is different so the image is different.

<body>

<div id="more-time2" class="very-small-text-size more-time " index="2" mode="Available" onclick="toggle(this.getAttribute('index'), this.getAttribute('mode'))">
    <table>
        <tr>
            <td id="arr-icon2" class="accordion_down"> </td>
            <td id="more-time-text2" class="more-time-button" index="2">more more more time</td>
    </table>
</div>

    <div id="more-time2" class="very-small-text-size more-time " index="2" mode="Available" onclick="toggle(this.getAttribute('index'), this.getAttribute('mode'))">
    <table>
        <tr>
            <td id="arr-icon22" class="accordion_down"> </td>
            <td id="more-time-text2" class="more-time-button" index="2">more time</td>
    </table>
</div>


    body
    {
        direction:rtl;
    }
    .more-time {
        display: table;
        width: 100%;
        color: dodgerblue
    }

    td.accordion_down {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAaVJREFUSIm91c9KG1EUx/HvuRGzKVl2NxRnLD6DD1BoH2AOgWz6RxroypXgqiB0W+hGQSYiLoRm3FfotlAo3RUEF9USyEoQDIJlbDxdjC1VJ5mZNMnZzb3n3s/cxY8jS+0fc/DrEVOsKySZOeNBt8bRU8EWpwU7rOlilaQCdcNOpoEabEc6v+kANjXoCJWGQX/C6Lce1VcA7s9ipP5HkLUJumdGJYzVu7gBA/Tw3xiyPxnXLW3p3OHfr3+3YpU+zDaAzjhJQ95G6u/d+I3bTS31Tg0XGiTjQfnUw1+9vX4HTnH/C8jy/6N2ckm1HqvceUQmnOLBhsHu6Ch9odLYUa+btT8QBqhSaxp2MKL9Ok1Kdkne6eft4wVH/ytwr6hoyH5LgyfDeoa+GCCNgHtWFAU618kYWrkwQKT+nsG7vD6DxHBhS73TscAAPYIVQz4P75LlNBH5VRiOVZJLZsNBw8Rgt6XBRtH7CsMAO+p1s4aJYQdVas0yd5WCIXOYnF9BuK73z8vckxunQfWi/f2DYI+BeqTz78uenxkVTiPz82WkD0ujAL8B/TCG0encSKQAAAAASUVORK5CYII=');
        width: 12%;
        background-repeat: no-repeat;
        background-size: contain;
        display: table-cell;
        vertical-align: middle;
        background-position: center;
    }

    td.more-time-button {
        display: table-cell;
        vertical-align: middle;
        padding-right: 4%;
        padding: 0.25% 0;
    }

And JSFiddle link.

Why does it happen?

Upvotes: 1

Views: 40

Answers (1)

LS_
LS_

Reputation: 7129

It's because in td.accordion_down you give a 12% width to the image and it scales based on the parent container, just give a fixed width (based on what you need) like:

td.accordion_down {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAaVJREFUSIm91c9KG1EUx/HvuRGzKVl2NxRnLD6DD1BoH2AOgWz6RxroypXgqiB0W+hGQSYiLoRm3FfotlAo3RUEF9USyEoQDIJlbDxdjC1VJ5mZNMnZzb3n3s/cxY8jS+0fc/DrEVOsKySZOeNBt8bRU8EWpwU7rOlilaQCdcNOpoEabEc6v+kANjXoCJWGQX/C6Lce1VcA7s9ipP5HkLUJumdGJYzVu7gBA/Tw3xiyPxnXLW3p3OHfr3+3YpU+zDaAzjhJQ95G6u/d+I3bTS31Tg0XGiTjQfnUw1+9vX4HTnH/C8jy/6N2ckm1HqvceUQmnOLBhsHu6Ch9odLYUa+btT8QBqhSaxp2MKL9Ok1Kdkne6eft4wVH/ytwr6hoyH5LgyfDeoa+GCCNgHtWFAU618kYWrkwQKT+nsG7vD6DxHBhS73TscAAPYIVQz4P75LlNBH5VRiOVZJLZsNBw8Rgt6XBRtH7CsMAO+p1s4aJYQdVas0yd5WCIXOYnF9BuK73z8vckxunQfWi/f2DYI+BeqTz78uenxkVTiPz82WkD0ujAL8B/TCG0encSKQAAAAASUVORK5CYII=');
        width: 50px;
        background-repeat: no-repeat;
        background-size: contain;
        display: table-cell;
        vertical-align: middle;
        background-position: center;
    }

Upvotes: 1

Related Questions