Why is a floated element in a table cell with nowrap pushed down?

[Shikkediel]

codepen.io/anon/pen/PbVWOJ

I’m trying to make this table cell responsive by removing any fixed width on that element on smaller screen sizes and then letting the text overflow ellipsis-wise. For this I’ll have to use nowrap but I can’t figure out why this is doubling the height of the cells when there is plenty room. Removing nowrap will make the height become normal.

Any idea how to solve this?
Thanks in advance.

Edit – hmmm… seems to be a Firefox specific issue.

bugzilla.mozilla.org/id=488725

From 2009. :-/

[Shikkediel]

Even with sort of a fix (putting the right floating element first), Firefox still renders the cell content oddly. Making the elements overlap:

codepen.io/anon/pen/gLqWON

Anyone have an idea in mind that won’t require giving the button it’s own cell perhaps?

[Shikkediel]

Meh…

codepen.io/anon/pen/woNdQo

There’s gotta be a cleaner way.

[stancevicbranko]

Hey,

Try this one :)

http://codepen.io/landb/pen/yVZbZv

I don’t think you can ellipsis text if there is an element, but can make this element positioned absolute so it doesn’t have affect on text.

[Shikkediel]

Thanks for the reply. I was avoiding absolutely positioned elements because they’ve led to trouble inside table cells before… it seems to work well in your pen though.

https://css-tricks.com/absolutely-position-element-within-a-table-cell/

Another blog article about it
This one too

I clearly recall finding issues with it as well but let me investigate and mark as a good answer later on…

Did Mozilla fix that maybe?

[stancevicbranko]

I’ve just tested it in mozilla, and I don’t see any problem with it.
Just several observations:

1. max-width of td acts like min-width with “white-space: nowrap” property. o.O
2. if you set width 100% on table element it is working as expected.

Here is a changed version (table width 100%) : http://codepen.io/landb/pen/yVZbZv

Very strange. :D

[Shikkediel]

Tables are utterly confusing. I also noticed the calc() I used in the previous pen isn’t even needed when using a div. It suddenly respects the boundaries of the right floated element:

codepen.io/anon/pen/mOvMVx

Thanks again for thinking along. :-)

max-width of td acts like min-width

I think I am avoiding this issue in my more elaborate use case because I’m setting table-layout: fixed and making the size of the cells then dependent on the width of the table head element…

https://css-tricks.com/fixing-tables-long-strings/

[stancevicbranko]

They are, indeed.

Np man, I love brainstorm :D

[Shikkediel]

Hey, is the “good answer” button disabled?

When it’s about bugs and support for undefined specs I guess there really aren’t any true answers, only workarounds.

[Paulie_D]

Hey, is the “good answer” button disabled?

Seems to be.

[Shikkediel]

Okay, I thought it had an expiration time a while way but it must’ve been disabled then already.

Lemme post a link to the larger idea of what I was trying to do – which seems to work well with a combination of the solution found and a fixed table layout (which I happened to stumble upon, sometimes you don’t even know what neat goodies you’re missing out on). It’s a lot more predictable across browsers than setting cell widths:

http://tamiyaweb.com/model/list

There’s a width: 100% and max-width on the table itself, as well as a few fixed widths on the narrower elements. Then the large cell with the title description will be the main responsive element (apart from hiding a few items on smaller screens) with an ellipsis text overflow. No width is defined on the responsive cell, it will expand to the maximum available inside the table otherwise.

Still working on the code in general. One of the first things I made and now revising it…

[Author]

Posts