The cat is judging you.
The cat is nice, but what does it all mean?
The page looks fine there but what is the width= In my computer on all browsers adter 400px it gets cut off on the right
Have you cleared your cache? Open up the CSS file - are you seeing the latest changes?
The cat is nice, but what does it all mean?
The page looks fine there but what is the width= In my computer on all browsers adter 400px it gets cut off on the right
This is what I get at 321px
and immediately below 400px I lose the right border
Scroll down and you will see a scrollbar.
Which, if you remember correctly…
Ahhhh…
Thta’s what you meant by cheap &ugly! Well, I agree.
So, what’s the expensive & beeautifuk answer?
^^
You’re right. Back to the school desk!
Thanks.
Sorry for the delay but I was out all afternoon.
I see Ryan has sorted you now but I thought I’d chime in with my preferred solution for tables on mobile and I now use this approach on all my tables.
(You’ll need to visit codepen to see the effect properly as the code window here won;t show the small screen version.)
You use a data attribute on the td to supply the title of the cell and then use css to show it at small screen. This provides a very usable method for mobile although on large tables it does mean a lot of vertical scrolling but is still better than most of the other convoluted methods I have seen.
Hi Ryan
Sorry to bother you again.
The code in that page is mostly based on js scripts or JQyuery. I found an interesting one that i would like to try in one of the links in that page:
http://dbushell.com/demos/tables/rt_05-01-12.html
I looked at the “Source code”, copied the lot and chnged a few things but cabnnot understand how to give widths to the columns. I tried adding something similar to what I have in the other file, but… disaster
My page is at http://pintotours.net/Zork/bushell.html
the code I added
.rt tr td:nth-child(1),
.rt tr th:nth-child(1) {
width:50px;
}
/* make third cell in row 100px wide */
.rt tr td:nth-child(3),
.rt tr th:nth-child(3) {
width:70px;
}
/* make fourth cell in row 100px wide */
.rt tr td:nth-child(4),
.rt tr th:nth-child(4) {
width:270px;
}
Your selectors are a bit off. I wouldn’t recommending setting widths on the columns though. If you want to do this though, please let me know what each columns width should be. You seem to have some conflicting styles going on here.
They should be as above:(1) 50px, (2) 70 px, (3) 200px, (4) 270px
They should be as above:(1) 50px, (2) 70 px, (3) 200px, (4) 270px
LATER
I’ve just realized that as you shrink the screen it goes from horizontal to vertical. I don’t want that.
What I like about it is that it passes Google’s mobile-friendly test even though it has a scrollbar, meaning that some text is outside the viewing area. With my page with 4 columns I tried add overflow:scroll and it fails the test!
Maybe the best would be to find a way of getting my current page to have a horizontal scrollbar and pass the test.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.