Clever Geek Handbook

Css & # 8594; <table> & # 8594; remove vertical space when table data contains multiple elements

I have a box table data

that contains a blue square at the top and an icon at the bottom.

See JsFiddle .

height

margins td

matter 26px

as there is little vertical space between the blue_line

div and the image user_icon

: enter image description here

I want this vertical space to be removed and the new height 20px

I was able to do this by adding position: absolute;

: enter image description here

But in my application I am using jquery.ui.resizable

, which is giving me problems if I add position: absolute;

to a div element .blue_line

.

My question is, are there any other ways to remove the vertical space?

+3


source to share


2 answers


You can change the display of the element td

togrid 

<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

. If you want to support IE

, you need to add some more styles and change the display of the element td

to block

, and the children toflex 

<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>
+1


source


I think you can use the background-image property and set the background-position



-2


source






More articles:


All Articles