I would like to know if it's possible, in a table where width=100%, and where each column width are % value, to get for the last column a fixed width?
If yes how?
The short answer would be no, not with CSS in a simple way. It is quite troublesome to mix fixed and relative width for obvious reasons.
There is however a new CSS3 feature calc() that can be used to let the browser calculate the proper width.
Notice Unfortunately it is still just experimental, and has limited browser support.
You could do it using CSS:
#mytable td:last-child {
width: 50px; /* change to whatever you want */
}
If your site requires JavaScript anyway, you could manipulate the width after rendering.
Let the browser render your table with relative column widths close to an ideal but without setting the last one to be fixed.
Read the width of the rendered table.
Subtract the width you would like the last column to have from the table width.
Calculate the width for the remaining columns by percentage using the value from 3. as 100%
Set all column widths programatically
Related
Ok, using the latest version of Bootstrap
Trying to set a column in my ROR application to a background color.
Here is the code (it's in HAML)
.row.testing
.col-lg-2
= render 'blah/blah_testing/
= yield :sidebar
.col-lg-10
= yield
I am trying to have the col-lg-2 column display a background color in its entirety regardless of how many rows there are, otherwise it stops when the last row stops.
The height is dynamic. And the width is set by bootstrap. And I don't think I can use table settings to set the column's background because that seems to rely on fixed measurements?
EDIT
Have simplified this question extensively .
Instead of height:100% use viewport heights.
You CAN use height:100% for a column, but you must set the body's height to 100% in CSS as well. It's cumbersome, once I discovered Viewport Units I've not used it since.
Alternatively as mentioned above, you can use a bit of a new CSS element called vh (do a quick google of "CSS vh unit" and you'll get a better explanation if you'd want to read more. [there ARE other viewport measurements you could find if you do read into it further])
Anyways back on point, for your row, give it an ID, let's say id="myRow" then set its height in the CSS to height: 100vh
One VH unit is equal to 1% of the screen size. So 100vh would be the full screen height, 50vh would be half screen height. (This unit is -supposed- to be dynamic, BUT I believe only the current version of Firefox has built in support so far...but don't quote me on that, been a while since I read the Viewport measurements doc.)
Here's a handy link/explanation to check out
https://css-tricks.com/viewport-sized-typography/
What's the basic difference between [width and height] and max/min[width and height] and where should we use each of them?
Thanks in advance........
The basic difference is that width and height will specify the exact width and height of an object. Max/min width and height will specify the maximum or minimum height and width that an object needs to be.
Say you had a div that you wanted to load images into, but you wanted all images to be the no larger and no smaller then a specific width or height, then using min/max calls would be ideal.
In other cases, where you know the width and height (say for only a specific image) then you do not need max or min height/width calls.
It is also important to note that max/min height and width calls will over-ride height and width calls.
Here is some more information:
CSS Height and Width
CSS Tests - Min and Max
width/height give you the strict constraints. max-height/max-width tell your element to be not wider/higher than a certain value, but the element can still be smaller than that value.
max-height/width are commonly used when you want to make the site behave according to the screen it is viewed on, but to not be super huge on the large screens anyway. The same about the elements - you might want to accept images of any size, but want to make sure they are not breaking your site layout. Hence you use max-width/height.
They don't work in IE6 though. If you need to support min-width/height in IE6 you can use regular width/height. IE6 will treat them as minimum values anyway and will expand them in case content needs more space. Both min/max width/height work fine in IE7+
I'm trying to make a table that stretches 100% of the page (or whatever container it's in, depending on where I use it).
When I specify the width of the table to 100%, it automatically resizes the columns based on the width of their content. This is nice most of the time when I wouldn't mind different width columns, but for this, I need all of the columns to be the same width. I know that I could specify a percentage width for the columns, but I need this to work for any number of columns.
Here's my code so far: http://jsfiddle.net/zwWHZ/2/
Is it possible to have a table with a width of 100% and equal column widths without having to specify the percent for each column with pure CSS?
I tried putting table-layout: fixed; into the table section of the CSS, and that appeared to work (even when I changed the number of columns). The source where I found that is here.
I am using Yahoo's UI Grids to structure most of my pages. One of my pages is a Google map and I need about a 400 pixel fixed left column to put map legend information into. YUI Grids however only offers 3 columns for their 100% page layouts, namely 160px, 180px and 300px.
Is there a way that I can customize their 'template 3' which provides the 300px column to get my 400px column I need?
I've determined how to do this. Kudos for Nate in the YUI forums for pointing me in the right direction.
To set a fixed left column, you need to divide the column pixel width by 13 to determine the em's for all non-IE browser's. For IE, divide the column width by 13.3333
e.g. wanting a fixed 480px width, 480/13 gives me 36.9231em for non-IE and 480/13.33 is exactly 36em for IE
Using template 3, the CSS is:
.yui-t3 .yui-b {
float: left;
width: 12.3207em; *width: 12.0106em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 36.9231em; *margin-left: 36em;
}
Also, if you want to tweak margin's e.g. zero margin, you can do something like:
#doc3 {
margin: auto 0;
}
Grids is presently deprecated in YUI 3 - a bit of a shock when I saw that. There will be some browser(s) that drop off the A category in July and as a result, Grids will be reworked given that some of the initial design decisions were based on older browsers of course.
There is definitely a way. I think its just a matter of tweaking the CSS to either add in another 400px column, or modifying an existing column to fit your needs. If you are adding another column, be sure to account for the additional width (plus margin) and either reduce width on other elements, or increase the width of your containing element.
If the layout is using 100% width of the browser, width may not be an issue, but if your content is wrapped in a container element which holds all of your columns, be sure to adjust the existing elements to make up for the size of your new column.
EDIT: Also if you are dealing with 100% width layouts, its probably better to size your columns using percentage, instead of a fixed pixel size. Since the containing element for your columns will be the user's screen, if you use percentage then the column sizes should adjust relative to their resolution/window size.
If you want your new column to appear on the left of the your other columns, typically you would place it before the other columns in your markup, and apply a "float:left" property. But, take a look at how the other columns are set up in the YUI CSS, and follow their method.
I hope that helps.
Acorn
I'm displaying some tabular data on my website so I decided to use some tables. Is it a best practice to use fixed width for your table columns (i.e., 100px) or to use percentage based widths?
I would not recomment fixed widths, as the browsers text size may be different.
The correct thing is to do nothing at all! Leave the table to size itself. Forcing the table to be 100% wide is an option, but can leave alot of whitespace.
How big will the table be on my mobile phone, TV set or desktop PC? The more you force a layout the worse it looks on unexpected platforms.
I agree with Quigley, however the "right" approach depends very much on your specific context. If you have to just display plain data on a website, basically just printing out HTML formatted data, I would also leave the table as it is. What you should do is to set it's width to 100% s.t. it expands on the whole width of the page. If it resides inside another container (such as div or other tag), it will expand to the width of that container.
If however you want to have your table just expand to a certain width, I would go for percent values instead of fixed tables, mainly because of the fact that your users will have different display sizes and resolution and therefore the according browser window with may vary. In such a case I would however consider attributes such as min-width that specifies the minimum width that your table will get. The attribute works perfectly on Firefox, Safari etc.. however on IE (as usual) you have to do a trick to achieve min-width by adding something like the following to your CSS class (which you add to the enclosing container of your HTML table or to the table itself):
width: expression( this.scrollWidth < 70 ? "70px" : "auto" );
This is just an example that specifies a minimum width of 70px, otherwise it doesn't set any width. You can customize it to your needs.
Fixed pixel widths are definitely the worst option. Percentages are much better. If you want to define column widths relative to other elements on your page, the best option is to use CSS and a unit like em that is relative to the text size.
For tabular data, I think relative (percentage) should be good.
But if u feel screen size may screw up your tables, go for the fixed approach.
I use(d) proportional widths extensively with HTML that has to work in browsers and CSS2XSLFO.
However Firefox 3.x has removed support for PCW widths in table columns.
See https://bugzilla.mozilla.org/show_bug.cgi?id=333352
So you'll have to use % widths.
I never use fixed widths (such as 50px), however I do use em or ex units in addition to pcw or percentage widths.
In regards to DeadAccount's answer, don't use W3Schools, they have a habit of having half-correct information.
http://w3fools.com/
Also, I'm pretty sure best practice is making a percentage instead of a fixed width, because as others said fixed will mess up in other browsers if they're using different settings than yours. Best practice could just be to leave it alone, however.