The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS HTML5… vertical-align 'linked' table-cell

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #159024

    HTML5… we want to link table cell to href destination
    vertically align table-cell content to top of table cell, for any cell-height.

    There are html5 language constraints:

    1.) vertical-align property is ignored by html5 for td content

    2.) inline valign is not allowed

    3.) display: table-cell does squat

    Here’s that beautiful table cell hover effect!

    td a { display: block; }

    Here’s one of many related discussions.

    How do we align linked table cell’s content to top-of-cell with css?



    I didn’t quite understand the question as you can easily align the contents of a cell to the top using td{vertical-align:top} which works fine in html5.

    Here’s an example (with a full height clickable cell as a bonus).

    You’ll have to clarify what is different from your needs to the demo above and then we can take it from there.


    paulob, your reply ignores my problem. You ignored the first line of my post! What your link demos is how text content flies up top line: but text at top line is still pushed down from top by line-height. And anyway, if there is text content in the cell, then the cell is NOT EMPTY!

    “we want to link table cell to href destination

    That means, hover a table cell and the entire cell is linked to wherever.

    The problem with IE is that it will color the cell background, stick a background image in there, even transition backgrounds… but ignores the ‘a’ tag without any cell content.

    Okay, say the woeful, put something there, like nbsp space, or a picture. For some bizarre reason I can’t work out, nbsp space makes the IE hover bulge hovered cell’s borders out exactly 1 px, for a single cell. Which for another reason nobody understands is cumulative, jiggling the entire table row, with a cumulative math determining the degree of mess.


    table.menucolor td { height: 2em; margin: 0; opacity: 0.40; padding: 0; width: 11%; }
    table.menucolor td:hover { opacity: 0.90; }
    table.menucolor td a { display: block; width: 100%; }
    table.menucolor td a div { background-image: url(maskclear.png); background-repeat: repeat; display: block; height: 100%; padding: 0; width: 100%; }
    td.menucolora { background-color: #888; }
    td.menucolorb { background-color: #bbb; }



    PLEASE, read my post: first line… look at my example

    link EMPTY table cell to href destination

    your example of cells clogged with line-height interaction is irrelevant

    I have a table with cells changing color on hover. Clicking anywhere in the empty cells will send browser to destination pages and bookmarks. And yes, we tried empty spaces in cells, but that results cumulative cells and row bulging on hover. To make matters far more interesting… target browser is IE11.


    Apologies if I misunderstood the question but the answer was made in good faith.

    PLEASE, read my post: first line

    Ok it says:

    we want to link table cell to href destination

    No explicit mention of an empty cell here!

    … and then you actually mention content in the next line and not an empty cell.

    vertically align table-cell content to top of table cell, for any cell-height.

    No mention of empty cell or ‘no content’ there either! I thought you were referring to actual table-cell content and that it was not aligning to the top of the cell and that the whole cell wasn’t clickable (hence my demo).

    look at my example

    I wrongly assumed it was a reduced test case without content as you never once mentioned an empty cell in your post. You also mentioned vertically aligning the content in a table-cell so it was naturally assumed that you would have varying content in those cells as per my demo.

    How do we align linked table cell’s content to top-of-cell with css?

    Again you mention content and not an empty-cell.

    However, this is where I am confused, because if you do actually want empty cells that have no content then there will be nothing to vertically align? Or am I missing something obvious?

    If you have empty cells then you will need to give the table a width otherwise the width on the empty cells just collapse but I still can’t really see what effect you are really after and why you would want to link empty cells as such as that would be bad for accessibility. Of course tables should only be used for tabular data and empty cells are not tabular data in most cases but I realise this may all be part of a bigger picture so we need more information.

    The best thing for you to do is to create a code pen with the html and css that you want to use and then explain what is going wrong and what you would like to happen and then we may be of more use.

    Lastly please remember the forum tips and “be cool”.


    Paul, you are not missing anything. You are hitting the nail right on the head. Line-height is the issue. Because line-height is the trick I use to hyperlink cell ‘surface’.

    You can follow this topic with better coding examples and screen captures at Adobe.
    Chris is the authority on CSS tricks, so I’ve nudged this topic over here.

    As I note at Adobe, line-height is great, until you start spanning rows. Then the hyperlinked so badly freak out IE that the browser refuses to display anything. So the line-height to link ’empty’ cell surface trick has to be adapted in some way.



    I’ve added another codepen to see if I am on the right track?

    Unfortunately it is only working in IE11 (plus Firefox and Chrome) at the moment.

    The trick is to use some pseudo content for the initial height and avoid setting heights on the tds. This allows rowspan and colspan to work nicely in very latest browsers.

    It may not of course fit in with what you already have but may prove useful as an example to either show what’s not working or indeed what is working as you wanted.


    Paul, you’ve got it. The HTML5/IE11 constraints noted above. Some functionality is gained in the new browsers, and some functionality is lost. Almost like the browser programmers have used up all the room they can find, so some gets chucked, to make way for the new. I will miss being able to vertically style the position of text inside a table cell, but having it always dead-center simplifies layout.

    You try! For me, the div container in a table cell always seems to inherit the cells rigid vertical-align:center behavior. We could always fall back on z-index and inline src images to force cell-height, but then, like text visibility:hidden that doesn’t seem to break through that rigid vertical-align:center constraint.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.