I am modifying a website that currently uses a <table> for a price list.
Because tables obviously don't break + wrap, on a mobile device the right hand side of the table disappears of the right side of the screen.
I'd like to use CSS to make this price list responsive, so that when the browser runs out of width it renders the next column underneath. This is simple enough if I stop using a single table and use float:left, but in this case I want the name of the cottage to be repeated (the first column) when a horizontal break occurs.
Is this possible? If so, how would I achieve it?
Peter, a better way to construct this to do what your aiming for is not to use the Table element at all.
Instead, use a series of div elements and give them the display type "table-cell" on the individual divs, along with "display: table" and "display: table-row" where needed for for rows and the overall table.
See: http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/
For an example.
Once you've broken things down into indidvidual div's, your then free to place those divs where you see fit, You could with a little bit of re-layout in the structure of the divs, put a new set down below the the first part of the table as you mention in your question.
However, once your using div elements, this actually opens up a more interesting way of doing things, by using FlexBox and more specifically "flex-wrap".
Flexbox and it's wrapping modes will do exactly what your trying to achieve, you just need to make the parent container "display: flex", add a flex wrap css rule, and the immediate div children of the container will take care of themselves.
Flexbox is fully supported by ALL mainstream browsers these days, and the various table display modes have been around since HTML4, so your not going to have an issue with any of it working. Flex also largely works on IE11, with a few minor edge cases (I implemented an online designer for a company 3 years ago when flexbox was first introduced and the target was IE11).
With the individual div approach, and if your targeting reasonable recent browsers you can actually go one step further and use CSS media queries to adjust things for different display widths
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
and you can even now do some feature detection is CSS too
https://css-tricks.com/using-feature-detection-to-write-css-with-cross-browser-support/
The only thing I can't come up with a possible solution for in pure CSS is the repeating of the cottage names column, although I suspect you might actually be able to conjure something up using "data attributes" and css rules targeting those attributes to get the text of the column name into an "element::before" pseudo css rule of some kind, I'd need to sit and spend a day playing with that idea to come up with anything concrete though.
Related
Basically this example works great on chrome and firefox but the marked table (marked with the "this table" comment) doesn't fill the whole container in IE. I want it to look like his brothers to the left. I've been looking at it for the last 30+ minutes wondering what in the world is causing it not to work. I could use the help of a 2nd pair of eyes
The whole thing is quite huge, the problem table is towards the end of the html.
The other tables that are filling up the container all have a wrapper div with a height declared on them but its missing on that one table that is not stretching. Add it and it works fine:
http://jsfiddle.net/aVkC8/1/
Oh and: Holy inline-css styles Batman!, you can greatly simplify your code with defined classes and styles for your table.
Have you tried using something like Normalize.css in order to get consistency across browsers?
From the homepage:
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.
What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.
Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.
Who can help?
Use "display:inline-block" for LI, not "float:left"
I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)
Only table rendering can resize a whole row according to its tallest member's height.
It's the only way I can see to do this without JS or PHP.
use jQuery.
Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.
I hope I am wrong though! :)
(Would love to be able to do this w/ css)
See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?
I want to get 4 columns, with the text floating in all of them. I don't want to make 4 separate divs, because when the first column if full of text, the text should continue in the next column.
I also want to set the width of each column and the padding between. Additionally, the height should be flexible, depending on how much text there is.
Do you have any ideas?
This is very difficult to achieve, and is not how HTML is designed. The recommend approach would be to render all the text in a single HTML element (div or p, etc) and in the browser, dynamically alter the content and markup with respect to a pre-determined "preferred height" and number of columns. You can use the height() methods of jQuery to assist you in this.
Here is a script with some of the groundwork.
An article explaining future support available in CSS3.
This article (11 Classic CSS Techniques Mad Simple With CSS3) shows how to do this using Mozilla- and WebKit-specific properties. Columns like these are item number 9 on the list.
For IE you'll need to wait for CSS3 support or use a script, such as the Columnize jQuery plugin mentioned in the article.
I've seen quite a few answers on this site which advocate using tables for a design because it can't be done using CSS and Divs... when in actual fact it can be done with a bit of ingenuity.
What are examples of things that genuinely can't be done?
The only one I've ever come across is vertically aligning a box within another box.
*edit: I suppose I'm mostly interested in unachievable layouts using CSS2
Vertical alignment of blocks or text.
Having elastic containers that stretch to the width of their content.
Having several "rows" with the same structure where "cells" are synchronized in width throughout all rows.
Having several "columns" synchronize their height (up to the length of the longest text block).
These are quite basic designer needs that appear in even basic design concepts.
Cells/columns issues can possibly be solved with CSS if you take IE8 into account, but it will be many years until its wide spread (even IE7 in 2-3 years hasn't reached the desired market share).
As for "ingenuity", it is not that good thing in software development. Tricks that your colleagues and you yourself after a couple of months will not be able to understand usually build up that code base that everyone either is scared to touch or determined to refactor/rewrite completely.
Remember the KISS principle. The simpliest way you do this, the more reliably it will work.
The answer to this question depends on a number of things:
How backwards compatible do you need to be? Including IE6 will decrease the capacity of pure CSS; and
How much of your site is fixed-width and/or fixed-height. There are certain things in CSS that become hard if not impossible in variable width and/or height situations.
Side-by-side content is a problem for CSS. You can use floats for this but if the sum of widths exceeds the width of the container, the tail end floats will fall down below. Tables are more capable in this regard as they will squeeze columns where possible to make things fit and cells will never be split onto new rows.
Vertical centering you mentioned. Its trivial with tables and hard or impossible (depending on compatibility and fixed or variable heights of the container and the item) in pure CSS.
You may also be referring to hover content. IE6 only supports the :hover pseudo element on anchors. Javascript is required for that browser for :hover-like behaviour.
Basically if what you need to do can be done fairly trivially with pure CSS then do it. If not, don't feel bad if you have to use tables despite all the anti-table fanatics (and they are fanatics) jumping up and down in horror.
If you want a relatively simple exmaple of this check out Can you do this HTML layout without using tables?. This is a conceptually simple layout problem that is trivial with tables and noone has yet posted a solution meeting the requirements with pure CSS.
"... when in actual fact it can be done
with a bit of ingenuity."
How about 'avoiding the need for ingenuity' as a thing that's hard to do in CSS.
;)
tables should be used for tabular data! We should always try to use the correct HTML for the given content in which to markup. So not just div's (span, ul, li, dl, strong, em ... etc) This ensures that the content is not just looking right but is right (for SEO and accesibile reasons)
By not using tables it allows us to transform the content from one look and feel to the next without having to change the HTML, see Zen Garden
For now though with current browsers CSS table like layouts can be done but are tricky. there are techniques to get round many of the issues, weather they are done though global wrappers with background images, or positioning fixes... where both articles also refer to using Javascript to progressively enhance a page to get those additional classes you may require.
or of course you could use some XSL as a middle ware to help do formating if processing from a CMS.
Alternate row colors in a table without manually (or with the aid of a script) assigning alternate styles to each row.
Determine one element's position relative to another. For example you can't use CSS to determine which position one box is in a bunch of floated boxes using the same class. Would be nice to for example know if one box is the first box floated, or the second, or the last.
Handle widows. A widow is a word that dangles off the end of a paragraph, that is a single word starts the last line on a paragraph. It's a big nono on print design, but in the world of web it's hard to control.
Floating elements in multiple columns, where text in each cell can expand the height of the element, but the entire row below must be pushed down if this happens.
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
| | |BBB| | |
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
An image cannot placed in exact center of a cell with align attribute.It can be done with some brute force .
Sounds obvious but you can't change content with CSS, it can only be used for styling.
Rory, I think you're absolutely right. Vertical alignment can be done with line-height, and creating lay-outs in CSS really isn't that hard. In fact, it's far more flexible when using absolute/relative positioning and floats.
People still using tables for design should really brush up with the current standards.
Going on topic, with CSS3 coming up it's hard to think of stuff CSS can't do. Image manipulation, content manipulation, advanced selectors, it's all going to be possible. But if I had to name one thing, it's that with CSS you can't (and won't) be able to rotate elements.
I was unable to use a transparency to create a variable-height text area across all pages. I believe it's impossible. I ultimately just wrote a quick javascript function to reset the height after the page load, to get the layout to work. See http://peterchristopher.com to see what I mean by transparency for the text area.
There is absolutely nothing tables can do that CSS can't.
There seems to be a common misconception that HTML & CSS should be easy. It isn't. If you find yourself wanting to use tables then its your CSS skills that need improving not the technology (although the technology does obviously have plenty of holes that could do with improving).