Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to force a TD to be a certain height with CSS?
    primarykey
    data
    text
    <p>Although <a href="https://stackoverflow.com/questions/2124630/forcing-a-certain-width-height-with-overflow-in-a-td">some</a> <a href="https://stackoverflow.com/questions/3968561/overflow-auto-in-table-td-that-has-no-certain-height">questions</a> <a href="https://stackoverflow.com/questions/5091179/css-how-to-make-td-a-fixed-height">similar</a> to this one have been asked before, this one is a little different.</p> <p>I have a table that looks a little something like this:</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td style="height: 100px;"&gt; &lt;img src="..." style="height: 100px;" /&gt; &lt;img src="..." style="height: 100px; position: relative; top: -100px;" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>This will overlay the second image on the first one. <strong>However,</strong> the <code>td</code> insists on being <code>200px</code> tall <em>even though there is only <code>100px</code> of content</em>. Setting the <code>td</code>'s height does nothing, which seems consistent with the answers to the other questions.</p> <p>However, I do not have the option of embedding the contents in a <code>DIV</code> and setting the height to <code>100px</code> because the <code>td</code> will <strong>still</strong> insist on being <code>200px</code> tall.</p> <p>How can I tell the <code>td</code> to <em>just be <code>100px</code> tall?</em></p> <hr> <p><strong>Edit:</strong> Oh, and using absolute positioning is out of the question too because a lot of DOM manipulation goes on in the page and stuff gets moved around - whereas the absolutely positioned stuff does not.</p> <hr> <p><strong>Edit:</strong> <a href="http://jsfiddle.net" rel="nofollow noreferrer">jsFiddle</a> example <a href="http://jsfiddle.net/S3s4G/" rel="nofollow noreferrer">can be found here</a>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload