All geek questions in one place

How to make TD be specific height using CSS?

Although a few questions are similar to this before, this is a bit different.

I have a table that looks something like this:

<table> <tr> <td style="height: 100px;"> <img src="..." style="height: 100px;" /> <img src="..." style="height: 100px; position: relative; top: -100px;" /> </td> </tr> </table>

This overlays the second image on the first. However, td insists it's 200px high, although there is only 100px content. Setting the height td does nothing, which is consistent with answers to other questions.

However, I have no way to embed content in a DIV and set the height to 100px , because td will still insist on 200px high.

How can I tell td just be 100px tall?

Edit: Oh, and using absolute positioning is out of the question, because there are a lot of manipulations with the DOM on the page, and the material moves - while absolutely positioned things do not work.

Edit: jsFiddle example can be found here .

+4
source share
5 answers

This has nothing to do with td , but with the character position: relative . The relative space of elements is stored in the document stream.

Get rid of relative and use position: absolute on the first image.

Edit: I just saw your edit. Hmmm. Thinking.

Two workaround ideas come to mind:

  • Click on td

  • If this does not work in all browsers or is invalid (I'm not 100% sure right now) Put two images in <div height='100px;'> and put overflow: hidden in it.

+8
source

Ad

 <td style="height: 100px; width:100px; overflow:hidden"> ...

should help you.

0
source

Overlay the second image in the table cell:

 <html> <head> <style> table {border:1px solid #898989;} td {border:1px solid #0090aa; overflow:hidden; height: 100px;} td div {position:relative;} .col1 {width:80px;} .col1 {width:128px;} .over {position:absolute; top:0; left:0; } .under {} </style> </head> <body> <table> <tr> <td class="col1">1</td> <td> <div> <img class="under" src="blank_file.png" /> <img class="over" src="19.png" /> </div> </td> </tr> </table> </body> </html>
0
source

There is 200px of content because position:relative does not free up the space that the object occupied before it was moved. You MUST use an absolute and possibly internal DIV position because things like overflow tend to cause problems with TD.

0
source

Instead of using a position relative to the second image to move up and overlay, use a negative margin.

Change it.

 <img src="..." style="height: 100px; position: relative; top: -100px;" />

Using:

 <img src="..." style="height: 100px; margin-top:-100px" />

Thus, it will actually move the image up, and then TD will cover only 100 pixels.

0
source

Source: https://habr.com/ru/post/1343496/

More articles:


All Articles