gpt4 book ai didi

html - 表格单元格的宽度

转载 作者:行者123 更新时间:2023-11-28 16:37:06 24 4
gpt4 key购买 nike

为什么一个表格有两个单元格,一个是图像,另一个是文本。当我更改文本长度时,它会影响图像的大小吗?

有一个代码有2个表,文字长度不同所以图片不同。

<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;
}

JSFiddle链接。

为什么会这样?

最佳答案

这是因为在 td.accordion_down 中,您为图像提供了 12% 的宽度,它根据父容器进行缩放,只需提供固定宽度(根据您的需要),例如:

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;
}

关于html - 表格单元格的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34331462/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com