Label should fill entire table cell

by agib

HTML

<h1>Different (failed) attempts to create links/buttons that fill an entire table cell</h1>

<table>
    <tr>
        <td>Some column title</td>
        <td>Attempt 1</td>
        <td>Attempt 2</td>
        <td>Attempt 3</td>
        <td>Attempt 4</td>
    </tr>
    <tr>
        <td>A tall cell
            <br>A tall cell
            <br>A tall cell
            <br>A tall cell
            <br>A tall cell
            <br>A tall cell
            <br>A tall cell
            <br>A tall cell
            <br>A tall cell
            <br>
        </td>
        <td> 
            <a class="block" href="#">
                <span class="css">td > a.block</span> 
            </a>
        </td>
        <td>
            <div class="link-wrapper height100pct"> 
                <a class="block" href="#">
                    <span class="css">td > div.link-wrapper.height100pct > a.block</span>
                </a>
            </div>
        </td>
        <td class="height1px">
            <div class="link-wrapper height100pct" style="max-width: 300px;"> 
                <a class="block" href="#">
                    <span class="css">td.height1px > div.link-wrapper.height100pct > a.block</span>
                    (works in Chrome, but NOT in IE10 and older, nor in Firefox)
                </a>
            </div>
        </td>
        <td>
            <div class="link-wrapper relative"> 
                <a class="absolute" href="#">
                    <span class="css">td > div.link-wrapper.relative > a.absolute</span>
                    (&bull; Wrapper needed because td { position:relative; } is undefined/doesn't make much sense. &bull; Overflow not handled. &bull; Needs JavaScript - takes a lot of bookkeeping and is hard to handle with dynamically generated tables, using e.g. Knockout.js)
                </a>
            </div>
        </td>
    </tr>
</table>

CSS

h1 {
    font-size: 1.5em;
    margin: 0.5em 0;
}
td {
    vertical-align: top;
    border: 1px solid #999;
}
span.css {
    font-family: Courier;
    font-size: 0.8em;
}
td.height1px {
    height: 1px;
}
.link-wrapper {
    background-color: Fuchsia;
    /* Colored to see if it shines through */
}
.link-wrapper.height100pct {
    height: 100%;
}
.link-wrapper.relative {
    position: relative;
}
a {
    background-color: Lightgreen;
}
a.block {
    display: block;
    height: 100%;
}
a.absolute {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

JavaScript

$("td > .link-wrapper.relative").each(function () {
    var heightOfRow = $(this).parent("td").height();
    $(this).children("a.absolute").height(heightOfRow);
});