I have a bunch of data input screens and they all use a basic table filled with asp.net textboxes. Some of the textboxes (the smallest ones) are set to 250px in width. The others have been set a width in px depending on what makes them align best at 100% zoom.
The issue is when you zoom in and out, it's clear that the boxes don't really line up on the far right.
Can anyone suggest a way to properly align these last columns. It's worth noting that for some reason when using 100% in the last column that it busts outside of the actual table a certain way for unknown reasons.
The columns with the larger textboxes are defined using colspan of 2 or 3.
The boxes at 100%
The boxes at 75%
Related
how to make 3 column layout where:
left column is fixed width
middle column is auto width (not fixed)
right column is fixed width
and all columns height are equal (but exact height is unknown)
Example:
I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.
Is there some css hack available to do it without table-cell ?
Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)
Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face
Edit3: no js please
Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview
Take a look at my fiddle:
http://jsfiddle.net/RB9JZ/1/
I've had to use javascript to make the columns the same height:
$(".col").setMinHeight(3);
In the setMinHeight(3), 3 = number of columns, and give each column a class of col or whatever class you'd like.
This is an interesting question. Since Rich already figured out the columns, I'm going to address the issue of getting all the columns "the same height". Like you said, this is very difficult to do without table behavior. What I've always done is use background images on a div that wraps all columns. This div stretches to the height of the tallest column automatically, and if you have a repeating background, it will give the illusion of matched columns. Since you have a special case of 3 columns with a fluid width in the middle, you will probably need two divs to wrap the 3 columns, and have two background images. One aligns left, and one aligns right. Let me know if that doesn't make sense.
maybe this variant:
display:block;
height:100px;
I have been trying to lay out a table with the following:
two or three columns that automatically size to fit the content in them
anywhere from 1 to 4 columns that resize according to the width of the table, and which truncate the text inside them
one column that contains three buttons and which I want to be exactly 220 pixels wide
I got it pretty much working thanks to the answers on this question. I set "min-width" on the first two or three columns, and "width" on the last column, and in the middle columns I wrap the text in a div, and then set "max-width" on the td and on the div I set width: 100%;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;. All that works fine on Chrome and Firefox and Safari and even IE 10.
The problem happens on IE7, 8, and 9. On all three "browsers", the middle divs don't truncate, they instead push out the width of columns to fit all the text, which blows out the table wider than the page.
I tried putting a table-layout: fixed; on the table on IE, but instead of getting what I expected or indeed anything sane at all, instead what I get is that all the columns are given the same width, ignoring the "width: 220px" on the last column's tds, and then after everything is laid out the last column expands to 220px, and blows out the table. If you don't understand what I'm saying, have a look at
http://jsfiddle.net/ptomblin/rHJk9/
in IE debugger or "Inspect Element" in Chrome or Firefox. If you look at the "Layout" of a td of last column, and it shows a small width same as all the other columns, even though the contents are 220px wide.
On the live site, putting the "ie8" class on the body is done using conditional <IF IE8> code, but jsfiddle doesn't seem to like that.
What I'm looking for is either a way to make the table work the same way on IE7-9 as it does on real browsers (without table-layout:fixed) or some "good enough" work-around that would at least fit on the screen, with or without table-layout:fixed.
http://imgur.com/44DeZv5 has a screen shot showing it on IE9. I've added a red line to show the actual edge of the table. Note how the button bar, which is in a td in that table, extends beyond not just the table, but beyond the actual screen width. (The browser is set to 1024x768, the table is inside a .content div that's 940 pixels wide)
http://imgur.com/0Zielaf is what it looks like in IE9 when you don't have the "table-layout: fixed"
http://imgur.com/K8Ob6VR is what it looks like on Chrome without the "table-layout: fixed". Note how it all fits on the screen and in the table. That's what I'm aiming for.
I found out what the problem was that caused table-layout: fixed to allocate all the columns exactly the same width, no matter what the width parameter on the actual column values: It was happening because the first row on the table had a single column with colspan="7". I figured it out because on W3Schools in the description of table-layout: fixed they mentioned:
The browser can begin to display the table once the first row has been received
which made me realize that it was probably only looking at the first row. I stuck in a dummy first row with empty columns, but with the appropriate classes on each one to give them appropriate widths, and it laid them out much better. (I also set the font size, height, and line-height, top and bottom margins and padding to 0 for this dummy row so it isn't distracting)
I am trying to create an input mechanism using the flex box model. I know it's not supported by all browsers, but that doesn't matter in this case. It really only needs to work on web-kit browsers.
I am trying to build a nice two column layout without needing to use specific widths. I have the flex property set to one on both the label and the input. However, as you can see, when the label element gets long, it messes up the width of the input that is next to it.
I want both label and input to be the same width down the column, but I want them to grow and shrink as the size of the window/device changes.
Is there a way to do this without having to set a width on either of the elements?
Update
I can set a max-width on the label elements to 5% and I basically get the desired effect. However, I'm still wondering if there is a way to do this without setting any width and using purely the flex box?
Here is a working jsFiddle.
The example you provided doesn't have columns at all, just the appearance that there are columns. Without actual columns you will have to set widths to make these 3 unreleated blocks look they are joined in some way.
You should be using the new CSS3 Flexible Box syntax, which is now 'flex' rather than 'box'. See the spec: http://www.w3.org/TR/css3-flexbox/ With this you can set the elements to have a <grow> <shrink> <default width> of 1 1 50%, so they will grow and shrink at the same rate and will each take up 50% of available width (you can adjust this or make it 60/40 or whatever).
Example JSFiddle: http://jsfiddle.net/XTa98/4/
Otherwise, if you want actual columns so that you don't have to set widths, you need to wrap all of the labels in their own "column" div and all of the inputs in their own "column" div.
JSFiddle: http://jsfiddle.net/XTa98/5/
This has actual columns and no widths set, but it does not degrade gracefully anymore since the elements are not in their own rows. To alleviate this you could always provide text-overflow: ellipses to truncate the text.
In any case, you have a trade-off. If you want the appearance of columns without actually using columns, you will need to set some type of width. Otherwise, you can use real columns but the elements are no longer joined as rows and you will need to account for the overflow when shrinking the browser width.
You don't have to wrap the elements in column divs to avoid setting widths. Just set each label and input to flex:1, and you'll get them dividing up the width equally. However, this is effectively just the same as setting each to be 50% wide, in this case, so I'm not sure what advantage it really has.
I need to build a layout similar to the one at www.PInterest.com, where - depending on the browser width (yes responsive design) the amount of columns varies. The problem is not the horizontal stacking but the vertical. How do i make the boxes different height and stack on top of each other som that it will not let the highest box determine the height for the entire row?
Using ASP.NET MVC 3, HTML/HTML5, CSS/CSS3
Make three elements (div, for example), that are fluid in their width. These will serve as your columns. Put the elements you want inside each column with the respective <div>.
I just made this as an example: http://jsfiddle.net/N4zkF/
I think viewing the example would be more helpful than me explaining it in words. The three columns are bordered in red, blue, and green. The content of each has a gray/black background and a fixed height.
This answer was edited. Last time I linked the wrong jsfiddle (was wondering why I got a downvote). Hopefully this will help you, OP.
u need to set the width of the colums with a percentage and have a min-width on each of the columns..
Say u want 3 column's,for a responsive design -- set the width of all 3 columns as width:33% and add a min-width for the least resolution that you are supporting,
say,1024x768 in that case -- 1000px is the total width that you might have at the minimum (ignoring the extra 24px for the browsers scroll bar on each sides).. so,let the min-width:333px.. so,if the width of the browser is more,it'll occupy the space.. else,min-width will be set anyway so you need not worry about the layout getting screwed..
here's a fiddle to get you started - jsfiddle.net/mvivekc/XwYDr
here's a nice tutorial that i stumbled upon
-- http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
-- http://css-tricks.com/the-perfect-fluid-width-layout/
I have a table with 1 row and 5 columns. I have fixed the width of those 5 columns to certain known values (150px, 200px etc..). I have also set the left-margin for each one.
I want the table to widen and occupy the entire width of its parent. So, I set its width to 100%. When the table is wider than the combined width and margins of the 5 columns, it causes them to spread out across the table leaving gaps in between.
But, I want those 5 columns to stay on the left.
To achieve this, I added a 6th column and set its width to auto, hoping that it will properly push the first 5 to the left and occupy the remaining space. It works in Firefox and Chrome. But it doesn't work in IE. In IE, the 5 columns still space themselves evenly across the table.
I tried setting the width of the 6th column to 100% instead of auto. But the problem is, it is wiping out the left-margins of the 5 columns! Sort of like, the 100% column is pushing the 5 columns too much to the left that their margins have disappeared!
I want the padding, margin and width of the first 5 columns to be maintained, but pushed to the left, yet the table should expand as wide as its parent.
The table has a background image that needs to show up beyond the 5 columns.
Some might suggest that I move the background to the table's parent, but I can't - take my word for it :D
How can I get this to work in Firefox, Chrome and IE?
Thanks.
Here is the link : http://test.greedge.com/table/table.php. Try it in FF and IE
Edit: The solution is simple: Add a to the one td in the table in the last column.
The table cell of the inlying table is not rendered, because it contains nothing. Thus, the last cell also contains nothing, does not get rendered, and the other cells have to split the available space amongst them.
I don't know which browser is doing the right thing here, all IE's (including 8) don't render the column, all other browsers do.
Old answer:
Columns aren't supposed to have margins according to the CSS 2.1 spec:
margin-right, margin-left
Applies to: all elements except elements with table display types other than table-caption, table and inline-table
You will need to use padding within the cells.
An auto column should work in any browser in the scenario you describe (just don't specify any width). Can you post an online example of a table that doesn't work?