How Can a <Label> Completely Fill Its Parent <Td>

How can a label completely fill its parent td?

I have only tested this in IE 6, 7, 8 and FF 3.6.3.

<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
tr {
    height: 1px;
}
td {
    border: 1px solid #000;
    height: 100%;
}
label { 
    display: block; 
    border: 1px solid #f00;
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}
</style>
</head>
<body>
<table>
    <tr>
        <td>Some column title</td>
        <td>Another column title</td>
    </tr>
    <tr>
        <td>Value 1<br>(a bit more info)</td>
        <td><label><input type="checkbox" />  </label></td>
    </tr>
</table>
</body>
</html>

The main trick here is to define the height of the rows so we can use a 100% height on their children (the cells) and in turns, a 100% height on the cells' children (the labels). This way, no matter how much content there is in a cell, it will forcibly expand its parent row, and its sibling cells will follow. Since the label has a 100% height of its parent which has its height defined, it will also expand vertically.

The second and last trick (but just as important) is to use a CSS hack for the min-height attribute, as explained in the comments.

How can a label completely fill its parent td in column structure?

You need to have a height set as a point-of-reference. In practice, any explicit height will do it and the solution from the question you linked to was to give the tr a height of 1px (which it automatically increases to the height of the tds).

Add this to your style sheet:

/* http://stackoverflow.com/a/3081445/557019 */
#actual-table tr { height: 1px; }

I've created a fiddle so you can see the result.

Update

Chrome doesn't seem to like that hack. Since you're using jQuery, you can loop over the table cells and set their height to their own current height.

$('#actual-table td').each(function () {
    $(this).height($(this).height());
});

I've updated the fiddle to show the results.

Make a DIV fill an entire table cell

The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

You said in your original question that setting width and height to 100% didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?

Edit

How foolish I am! The div was sizing to the text, not to the td. You can fix this on Chrome by making the div display:inline-block, but it doesn't work on IE. That's proving trickier...

HTML Label to fill cell height, with some form of padding

From the given CSS it looks like there may be browser default padding on the table cells.

td {padding: 0;}
label {display: block; padding: 1em;}

seems to do the trick for me : http://jsfiddle.net/Fb7bS/

But a more complex table and/or inherited styles from elsewhere may add complications.

Textarea to fill a parent container exactly, with padding

Use width: 100%; height: 100%; to make the <textarea> fill up the wrapping <div>. Unfortunately, you won't be able to put on margins/padding, as they get ADDED to the 100%, so the right/bottom edges will overflow.

Edit: To use width: 100%; along with padding, you can change the box sizing model:

    width: 100%;
    height: 100%; 
    box-sizing: border-box;

With this change, 100% now refers to the distance between the outsides of the borders, instead of the distance between the outside of the content.

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Style input element to fill remaining width of its container

as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>