Can a table be styled like this? Or would something else be better? [closed] - html

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
Basically I am working on some practices since last week to start learning html and css, and I wanted to create a table of sorts to display items with the option to see more info and take/buy it. I was thinking in adding some background icons or image hence the strange looking table.
My question is. Can something like that be styled or would a normal table be better? To illustrate my point I did a mockup of sorts.
Oh! And as not to make another question just for that, can a dropdown list be made to have checkboxs without using jQuery? I'm afraid that is completely out of my reach with my current knowledge.
http://i59.tinypic.com/25z47dh.png
Thanks a lot in advance
Best Wishes

You have a few options:
You may use display: table and assign table 'rows' and 'columns' on div tags.
Or
You may use float: left which will line everything like a table and be more responsive.
Or
You may use display: inline-block which will behave a lot like the floats except you get a little bit more control on box height.
There is no correct answer here but my preference is with inline-block since browser support tends to be superior than floats while keeping everything responsive.

Related

What is the best practice with containers? When is using multiple containers a good idea or not? [closed]

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 7 years ago.
Improve this question
I am using Materialize CSS to create a homepage. I usually use one container to hold everything. This time, I used different containers to hold different elements, for instance, one for the navigation bar, one for the carousel, and so on. There are no containers within containers.
Is this good to do? What is the best practice with containers?
Some times using multiple containers is ok and even required. For example think of page with multiple full width element, which contains different background color and centered content. These full width elements could be <section>s and centered content could be containers.
You have to think is your solution logical. If you can figure reason for your element to have it's own container, then it is ok to use. If you provide link to your work, i could give my opinion.
As clear answer to your question, i think it is good to use multiple containers if page structure requires. Container is just one element among the others.

Bootstrap/HTML - multiple level table with folding [closed]

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.

avoiding scaling on a webpage [closed]

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.

How to Make CSS3 Columns Display Properly [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am working on a website that uses CSS3 colums to break up the text of the article to three columns. In it's current state, there is a few paragraphs, an unordered list and a few more paragraphs.
I want the article to essentally read like a newspaper, but CSS is breaking this up in a really perculiar way, and I cannot figure out how to fix it. The current website is the Hospital Safety Store. Thanks for your help!
Quite frankly, with purely css and nothing else you can't split the contents of a single div across multiple columns like that.
Each column should be it's own DIV, which means you'll have to pre-split the article into three. You could do this manually but it'd probably less of a headache to write some php on the back-end to break up the article programmatically.
I'd typically have one container-div that is the full width, and then have child div's for the different columns.

How to make a flowchart/diagram using only HTML and CSS [closed]

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 need to make a really complicated diagram for a website, in which the hierarchy will be a bit messy: arrows will go up and down, sometimes an element will point to several others, and sometimes there will be several elements pointing to the same one. I have found this method, but it doesn't allow more than one parent for an element and therefore won't do the trick in this case.
It has to be done in HTML/CSS, because my intention is to add some Javascript to change the content of the blocks dinamically.
This is an example of the level of complexity I need to achieve:
You might want to take a look at this
http://thecodeplayer.com/walkthrough/css3-family-tree
Another to look for is SpaceTree example by "Nicolas Garcia Belmonte" but not a pure CSS solution. It is compatible with IE and most of browsers. Definitely worth a try.