Question

I cannot get this style to work. Take a look at my drawing:

Markup:

<h1Title</h1>
<table>
    <tr>
        <td>
            <dfn>help</dfn>
            <a href="link0.php">
            <span>text</span></a>
        </td>
        <td><a href="link1.html">
            <span>text</span></a>
        </td>
    </tr>
</table>

I’m trying to make the <td> element clickable by using the <a> element as a block. But, I need to put a small “header” with <dfn> element inside the <td> too. I can make the <dfn> align to top-right and preserve the <a> vertical text align relative to its container without conflicting with <dfn> when it exists.

Thank you in advance

Answer 1

I changed your markup bit and added some positioning and padding to get something close to the image you posted:

HTML

<h1>Title</h1>
<table>
    <tr>
        <td>
            <span class="cellContainer">
                <dfn>help</dfn>
                <a href="link0.php">text</a>
            </span>
        </td>
        <td>
            <a href="link1.html">text</a>
        </td>
    </tr>
</table>

CSS

td {
    border: 1px solid black;
}
.cellContainer {
    position: relative;
    display: inline-block;
    padding: 12px 0;
}
a {
    background: grey;
    padding: 12px 24px;
}
dfn {
    position: absolute;
    top: 0;
    right: 0;
}

jsFiddle Demo

The borders in the demo represent the cell borders. The grey background is the link area.