CODEWITHSUNDEEP
htmlhtml-table
Joni Bolkvadze
Joni Bolkvadze

Reputation: 31

100% height div inside table td

I have this table:

<table>
    <tr>
        <td>
            <div style="height: 100%">Some Content</div>
        </td>
        <td>
             Some Content<br><br><br><br>
        </td>
    </tr>
</table>

<div> height should be 100% inside <td>, but height of <td> is not specified. There should be some simple solution.

Upvotes: 1

Views: 1985

Answers (1)

Anicho
Anicho

Reputation: 2667

JS FIDDLE EXAMPLE

You can use:

<td style="vertical-align:top;">Top</td>
<td style="vertical-align:middle;">Middle</td>
<td style="vertical-align:bottom;">Bottom</td>
<td style="vertical-align:54%;">Custom</td>
// More information on: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

On the table cell to position the content correctly. You still however get background coloring issues where you probably want to apply any color directly to the table cell like so:

<td style="background-color:yellow;"></td>

Information on table row heights:

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height). CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values. CSS 2.1 does not define the meaning of 'height' on row groups. Source W3.org

  • I have done inline css remember to always separate css using style sheets.

It seems that the div height is restricted to the cell's height, we can manipulate the cell height in pixels. 100% will only ever give you 100% of a cells min-height so you'll have to define it in pixels or some of form of dimension up to you.

Upvotes: 1

Related Questions