[英]css --> <table> --> remove vertical space when table data contains several elements
I have a table data
field that contains a blue square on the top and an icon on the bottom. 我有一个
table data
字段,顶部有一个蓝色方块,底部有一个图标。
See this JsFiddle . 看到这个JsFiddle 。
The height
of the td
field is 26px
because there is a small vertical space between the blue_line
div element and the user_icon
image: td
字段的height
为26px
因为blue_line
div元素和user_icon
图像之间有一个小的垂直空间:
I want that this vertical space is removed and the new height is 20px
我希望删除此垂直空间,新高度为
20px
I was able to do that by adding position: absolute;
我能够通过添加
position: absolute;
来做到这一点position: absolute;
: :
But in my application I use jquery.ui.resizable
which gives me problems if I add position: absolute;
但在我的应用程序中,我使用
jquery.ui.resizable
,如果我添加position: absolute;
to the .blue_line
div element. 到
.blue_line
div元素。
My Question is if there are other ways to remove the vertical space ? 我的问题是,是否有其他方法可以删除垂直空间?
You can change the display of the td
Element to grid
您可以将
td
元素的显示更改为grid
<td style="display: grid;">
<div class="blue_line"></div>
<img class="user_icon" src="http://findicons.com/files/icons/1008/quiet/128/opera.png"/>
</td>
Unfortunately this property does not exist in Internet Explorer
. 不幸的是,
Internet Explorer
中不存在此属性。 If you want to support IE
you'll have to add some more styling and change the display of the td
Element to block
and the children's to flex
如果你想支持
IE
你将不得不添加更多的样式,并将td
元素的显示更改为block
,并将子项更改为flex
<td style="display: block;">
<div class="blue_line" style="display: flex;"></div>
<img class="user_icon" style="display: flex;" src="http://findicons.com/files/icons/1008/quiet/128/opera.png"/>
</td>
我认为你可以使用background-image属性并设置background-position
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.