Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a web app with a bunch of wide tables that represent spreadsheet-like data.
It works well on regular computer monitors but doesn't scale well on phones and smaller screens.
Is there a method for optimally displaying very wide tables on small screens without the need for the user to do a lot of horizontal scrolling?
You can use responsive design to get the desired result.
A while back i answered a question on responsive tables.
Link to the Question
It all depends on how big you table is and how you want to present it.
You can avoid part of horizontal scrolling by hiding unnecessary data (if there is any).
If you have to present the same amout of data you have to with with vertical scrolling.
Example Fiddle
If you have qiute a lot of horizontal rows now it results in a big vertical scrolling page.
In that case hide data and show as user request on cells.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a side menu that i want to be show just when the user minimize the screen : (And will also appear on cell phones)
<button class="???" onclick="toggleMenu()">☰</button>
How can i do it ?
You'll need to make use of CSS media screen queries here to make sure your menu can account for smaller and larger screen sizes.
I'd recommend looking at something like Bootstrap or similar libraries to help you along the road with that.
Good link for reference: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors
If you don't want to use Bootstrap and would rather make your own CSS classes to handle this, you'll have to experiment with examples such as this: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to implement multiple level table with folding like this one
Top by usage, Top by delay, Top by memory rows can be folded
Currently i am working with bootstrap. I found something similar here except that i need to see columns only in expanded part and so far i was not able to twist its functionality. It does not have to be implemented with bootstrap.
Thank you for your suggestions.
//EDIT: Forgot to mention, another problem is that table needs to support scrolling within the table without moving page.
Tables are always tricky. =(
So in order to make the table scroll without moving the whole page:
table {
overflow-y: scroll;
}
Just set a reasonable height and width for the table and then it is possible to scroll it up and down. Yet, this comes with a few caveats. First some mobile browsers are still having issues with overflow: scroll and secondly you will have to actively tap/click on the table once before you can scroll it.
All of that being said you sure would have to throw some JavaScript or a whole lot of CSS on the table in order to make the toggle work.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have been doing some research about what width you should use for your website if you're not using responsive design.
The most mentioned width where:
960px
978px
980px
My question is since most of these posts where outdated, which one is prefered nowdays?
I want it to scale down so good as possible for mobile devices.
Thanks Jack
Number 960 is divisible with pretty much anything (28 factors, which is a lot), that's the reason it's used the most. This not only scales well, but allows you to divide the page into many, many variants of equal-width column numbers.
And it's probably to stay around as a standard for quite a while (until we get much larger/denser displays).
Mobiles nowadays have no trouble scaling whatever you give them, but it's your task to make sure it looks nice and readable when it's scaled down, even if you decide not to use 960.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm creating a website for myself (portfolio to be precise) and I have some images that I want to put in the website.
I was coding on my laptop (15") and previewing the website there all the time. I then uploaded it to a server and opened it on my home pc (23" screen), first thing I noticed was that all the images are way too small for this kind of screen.
Images looked perfectly fine and occupied about 60% of the screen height on my laptop while they hardly occupy 40% of my 23" screen.
How do you website designers deal with this kind of stuff?
Responsive web design along with media queries is the way to go.
http://www.hongkiat.com/blog/responsive-web-tutorials/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hello I am building a webpage that consists of tables, its been successfully built, but the only problem is that when my page is uploaded, the way it looks varies on different screens, so i am trying to have a fixed size using css, so that my page looks unique on all screens, this is what I have tried
style="height: 100%;", for my tables and body tag
But it makes my page not to scroll, but the content and images are looking terribly stretched. can anyone suggest what I can do to have a well looking webpage that would come out uniquely on all webpages
Read on how to use the <div> tag in combination with CSS. Much easier to design your homepage using the <div> tag rather than <table>. Also it will help you when you need to make layout changes for your homepage in the future.
Give elements a fixed width rather than percentage to avoid stretching.
More ideally, look into learning media queries.