Scrolling table cell element when needed
-
So I have some CSS that applies to a given table:
table.DataSetTable { font-size: 2em; width:100%; height:100%; table-layout: fixed; border:2px solid #C0C0C0; border-collapse:collapse; padding:5px; } .column_5 { word-wrap: break-word; display: block; max-height: 100px; overflow-y: hidden; /* Apply animation to this element */ animation: vertmarquee 15s linear infinite; } /* Move it (define the animation) */ @keyframes vertmarquee { 0% { transform: translatey(0%); } 100% { transform: translatey(-100%); } }
It certainly transforms the element (which happens to be a
td
), but that's not desirable, since the whole cell moves (instead of the content inside it).Inside each
td
is aspan
that's holding the actual content, but if I put theanimation
on that, it just jitters the text in the cell (presumably because it's taking the visible height instead of the actual height?).I sourced my info from here:
I'm probably missing something simple. Any hints? I just want overflowed content to scroll to the top in animation (if it's overflowed).
-
Seems I was just missing
display: inline-block;
on both thetd
and thespan
inside it. Great.Now to get it to not animate when the text doesn't exceed the 100px height...
-
@Tsaukpaetra said in Scrolling table cell element when needed:
Now to get it to not animate when the text doesn't exceed the 100px height...
Decided this is not technically possible, since CSS doesn't apply according to conditions (because reasons). Oh well. Having cells that mysteriously float downward instead of up when they're not too tall isn't that big of a deal...
-
The correct answer for "how do I use CSS marquees?" is "don't", Shirley?
-
@Tsaukpaetra
Just in case you want an alternative to marquees (bonus: requires no additional markup):https://jsfiddle.net/0jsza60j/2/
I tried to add an
::after
element with a gradient as well (to make it clear that the cells in the column can be expanded), but my CSS is a bit rusty and therefore I didn't succeed. You can achieve a similar effect withbackground-image
, but you cannot animate hiding that. Also, it sucks that I had to usetd:nth-child(2)
becausecol
doesn't support all the CSS properties I need. :/
-
Update: I finally managed to place a gradient on the expandable cells using
::after
(I forgot to addcontent: ''
- it's been a while) and cleaned up the CSS a bit:https://jsfiddle.net/0jsza60j/4/
The effect looks pretty nice already. Still zero JS and zero additional markup required. Instead of the height of the
::after
element you can also animate its opacity, the result looks almost the same.
-
I saw your code in the other thread... it's for a MLP-related site.
I helped with some code one time, but even I have to draw the line somewhere...
-
@anotherusername said in Scrolling table cell element when needed:
I saw your code in the other thread... it's for a MLP-related site.
I helped with some code one time, but even I have to draw the line somewhere...
interest perked
Que?
-
@e4tmyl33t his code, or 's? The latter was so long ago that I don't think I could find it, but posted in the Status thread shortly before he created this one.
...I misspoke; it wasn't the code. It was a screenshot of the page.
-
@asdf said in Scrolling table cell element when needed:
alternative to marquees
Sorry, unfortunately this will be a non-interactive display, there will be no mouse interactions here.
-
@anotherusername said in Scrolling table cell element when needed:
even I have to draw the line somewhere...
Fair enough I suppose. Next time I'll obfuscate more so you don't have to let your prejudices get in the way.
-
@anotherusername More in the nature of the site in question, but I'll just poke through there and see.
-
@e4tmyl33t said in Scrolling table cell element when needed:
site in question
It's just the convention website. Http://babscon.com/
-
@Tsaukpaetra URGH
-
@lucas1 said in Scrolling table cell element when needed:
@Tsaukpaetra URGH
No doubt. It's a good thing I don't have to do this web design thing very often.
-
@Tsaukpaetra In your defence CSS overflows are a nightmare to do correctly cross browser. The you have the added complexity of tables which do table layout.