I have a pretty nested structure of tables from a CMS. Each column has a specified width e.g. width="61" for the first column.
Nevertheless Chrome ignores the width and adds random spacing so none of the columns have the right width in the end and it looks like this:
Other browsers display the code just fine.
I have tried to use table-layout: fixed but that made everything worse.
Here's the fiddle
http://jsfiddle.net/xv8U5/
Help greatly appreciated.
I believe there is a difference of rules depending on the browser. Most browser will scale the TD to the largest TD of the same column. Chrome, however, seems to use the first TD's width as column width.
Hence, if you specify the width of a TD after the first row, that width will be ignored if the first row already contained a TD for that column.
The solution is to specify the width right from the first row.
Related
I am playing with the table-layout:fixed, it works almost perfectly for my needs. However, apparently I can not have a column of fixed size that won't change when I add or remove columns dynamically from the table.
Here is the example. If you add some columns you can see that the first column shrinks and the checkboxes kind of pop out of the columns. How can I make the first column have a fixed size while keeping the table-layout:fixed behavior on the other columns?
I am using table-layout:fixed because once I add enough columns, it will add a horizontal scroll bar and will guarantee that the columns have at least the width I specified.
You can try a different approach by not using table-layout: fixed and achieve almost the same result. Also, instead of using width property for the <th>, you can define min-width.
Check this updated fiddle: http://jsfiddle.net/L9rudjng/5/. I moved the inline CSS into CSS box too.
The table will maintain the 500px until it can't hold enough <th>'s with 100px width. Then it will expand and force the horizontal scroll.
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'm facing a rather difficult issue at the moment; really appreciate your help.
I have a table with 2 columns, td1 and td2, and containing texts and both of which have fixed widths.
td1.width = 10px and td2.width = 20px
the fixed width are set at runtime one by one from the left using JQuery (as this table is nested inside another table...)
The text width may be longer than these fixed widths in which scenarios the expected behaviour is that
the fixed width of the columns should stay the same 1) if there are extra texts, the text should wrap, it should not increase or decrease the td width 2) if there are empty spaces, the cell width should not be reduced when resizing other columns or page; it should stay intact.
I have set the td.whitespace property to pre-wrap and td.word-wrap: break-word but they haven't helped.
how would these be possible using css 2.0 (not 3.0)?
Thanks,
In this case, because the widths are so small, and the text doesn't typically have words that small, it has no way to wrap them, so it extends the width of the td even with a set width!
It decreases the width of the second td because the first is using an extra width.
Also, you could have a situation where the text is so wide (a long word for example) and in that case there is no way to wrap it. Unless using javascript, IMO it is the only way.
I recommend reading this answers: HTML TD wrap text
ok, I got it resolved. My table had thead and colgroups. Althought their display attribute was hidden, IE 9.0 ignores it whereas IE 6.0 takes them into account in calculating the width of columns!
I removed them using jquery and sorted out!
$('.myTable thead, .myTable colgroup').remove();
I have a table in a HTML form. It has a fixed height for optical reasons. The number of rows in the table varies depending on the number of form fields available.
Problem: If there are very few rows, all rows are stretched vertically, increasing the space between input elements.
I could avoid this by giving the data rows a (fake) fixed height. I don't like that approach because there is no fixed height I could give it (relative font sizes, accessibility) and I fear future problems - say for example that IE9 decides to take cell heights literally.
What can I do?
I have a last (empty) row but no idea what to put in there so that it automatically occupies all "available" space.
Put heightless table in a div with a fixed height which mimics the table (border? bgcolor?).
By the way, just doing tbody { display: inline; } instead of an empty row works in all real browsers. No, not in MSIE. The tbody element has a lot of shortcomings in MSIE. It also lacks the ability to overflow: scroll; which would be great to have a scrollable table with a fixed header.
Couldn't you set the cell height to 100% for the last empty row, this should presumably cause that last row to take up the rest of the fixed space
I guess this is not doable.
Yeah, table based websites are beyond ages, however you would still need tables to display data. In fact I have to agree with Pekka that this is not doable on the table cell itself, but there is something we can fashion:
Try wrapping the data inside the td cell into a div and style that div to the height you want and set its overflow property to hidden.
I have a table with several groups of columns. The table is larger than my page, so I have a control to show/hide some of these groups to fit on the page. The initial table looks good: all columns are about the same width within a group. But when I hide a group, the columns are not the same width anymore, and it looks bad.
Example: http://www.reviews-web-hosting.com/companies/apollohosting.html (broken link)
So far, the table looks fine. Click on >>. The first column under "Ecommerce Pro" is much wider than the other columns under "Ecommerce Pro", it looks odd. Click on <<, this time the first column under "Value" is too wide. At least on Firefox.
I've tried to use
<colgroup><col /><col span="5" />...
but no luck. If I set a col to style="display: none", the set of columns is still displayed.
Any HTML/CSS tip to keep the columns with the same width withing a group?
Edit:
to hide a column, I have to use visibility: collapse
it seems to be resizing well now, I do not know why
If you set the style table-layout: fixed; on your table, you can override the browser's automatic column resizing. The browser will then set column widths based on the width of cells in the first row of the table. Change your <thead> to <caption> and remove the <td> inside of it, and then set fixed widths for the cells in <tbody>.
give this style to td: width: 1%;
In your case, since you are only showing 3 columns:
Name Value Business
or
Name Business Ecommerce Pro
why not set all 3 to have a width of 33.3%. since only 3 are ever shown at once, the browser should render them all a similar width.
well, why don't you (get rid of sidebar and) squeeze the table so it is without show/hide effect? It looks odd to me now. The table is too robust.
Otherwise I think scunliffe's suggestion should do it. Or if you wish, you can just set the exact width of table and set either percentage or pixel width for table cells.