Im using datatables in my site for most of the tables. I have done but the design is not so good even in responsive view. if i use div instead of table then datatable will work or not.. If anybody had the solution share me thanks in advance
Related
I've been trawling the internet and found a few ways on how to make tables but I guess what im trying to achieve is a little bit different. Ive seen how you create a board but how would you go about creating squares with different sizes?
I have a web-app with the front end using materializecss.com framework. It has quite a few data tables throughout. My tables are using css from materialize and I really like the styling. The tables have between 5-8 columns and on mobile you first have to zoom in and then scroll over.
What I'm not sure about is what the best approach is to making this mobile friendly; I've been searching around for code that converts tables into cards and have found some for bootstrap cards but not for materialize. I don't want to hide columns.
I've tried my hand at a few solutions using media query's like: #media only screen and (max-width: 992px)... but I think materialize is overriding them because they are not working. I've tried to mark them !important or search through and modify the materialize css file but it is not working.
How bad would it be to create separate card elements and hide either the table or cards depending on screen size? It's mostly text data and links that are loading so I don't think it would significantly increase data transfer amount.
I'm not a pro at html/css/sass and even worse at javascript so any advice is greatly appreciated!
Adjusting your website in relation to the screen size is called responsive
Try looking for that in your research.
Using materialize gives you the option to the option to define a rowand within that you can make columns and define their size. You can even define the size relative to the screen size.
Try looking into this: https://materializecss.com/grid.html
Materialize also has its own (responsive) table and collection structure that might be helpfull to you.
Also it might be helpfull to use % in your css instead of fixed px
If you this doe not solve your case, try looking into flexbox and overflow.
I hope I understood your problem correctly otherwise some code of yours would be really helpfull :)
I've got a big table that displays a lot of data.
On Destop it looks quite ok, but on mobile it just cuts of the data and I am not able to access what is on the table, like this:
Desktop Version of Table
Mobile Version of Table
Is there any way to make Tables accessible on Mobile? Or is the only way to just keep the data on a couple of rows only? And separate the columns on different cards?
(And yes, I know that this is not the best use for a card, I am still experimenting with mdl).
Thank you a lot.
If this is not late you can use this trick to make it responsive
https://css-tricks.com/responsive-data-tables/
I have an assignment to display products in specific way that needs to be responsive as well,
this is what I need to achieve:
In your opinion and experience, in order to achieve that what method will you use?
Bunch of divs? table? ul/li?
I need little bit of direction before I'll start encoding the image. and I'm looking
for the most efficient way for the responsive design.
The most efficient way can only be done using bootstrap. A starter guide is found on the following site
http://getbootstrap.com/css/#tables
Just load the libraries in you project at the appropriate places and apply the classes to your tags to get the most responsive design you want.
I have got a requirement where the outlook is as shown in the attached image
I have accomplished the task by making use of tables in HTML and styling using CSS.
The criteria is that the images in a row is almost the same (i.e the two images) and the content changes for every row. So the content is different on every row but the images remain the same for every row. Just for info there will be multiple number of rows. What would be the best practice to implement such as design other than using tables, where it should also be flexible to change the content. Or using tables is the best option.
Suggestions from the professionals are appreciated.
I don't want to write it for you but I've made a quick mock up for you to have a look at - http://jsfiddle.net/spacebeers/TAJdw/
You don't want to use tables for anything other than tabular date anymore. You're much better off spending your time researching CSS.
Have a look at my example. It's what one instance of a content container could look like. What you want to do from there is look at getting two of them in a row. Build the CSS for the .container class, then copy another instance of .contentContainer in and see what results you get.
I'm happy to provide help if you want but it's always good to have a crack at it yourself. You'll get better answers on here and avoid unnecessary downvoting of your question.
It is generally advisable to use pure css for things like this, rather than tables. Tables cause your page to render slower, as the content needs to be loaded before the rendering engine can correctly draw them.
Try something like this
I would consider using a div with a background image style to it so that for each row with the same image all you will need to do is put that specific div class in. Then you can just position the outer div's to get it to look correctly, although tables are not the most efficient way of build web pages they still work.
Like mez said - you need to think about repeating content - and learning about floats. I'd really advise working through this site
http://css.maxdesign.com.au/floatutorial/
it will teach you all the basics of designing with divs.
In the meantime - here's roughly what your're after. I've added background colours and made up all the heights and widths, as they weren't specifie, but it should get you started.
If you look at the html, I've annotated what is just a repeat of earlier content.
http://jsfiddle.net/zandergrin/k8EsP/3/