I have a question.
I am testing out a table. This will eventually be with ASP.net but for now I'm just using JSFiddle to get the styling and everything done.
But I came across something inexplicable (at least for me).
Here is my fiddle
So I am setting the widths of my columns, and I am equaling 100%:
<table id="UndergradTable">
<col style="width:20%"/>
<col style="width:60%"/>
<col style="width:20%"/>
<thread>
....
</table>
If I change the numbers to 22, 56, and 22, (which also add up to 100%), the whole table actually shrinks in size instead of just the middle section.
Is there a reason why this should happen?
When a table is width: auto, each cell is as narrow as possible while still being wide enough to:
support the width constraints in the CSS
hold all the content of the cell
not cause the table to horizontally overflow its container
The text in the right most column is the widest. When you make the relative width of the first two cells smaller in comparison to the right most, the entire table shrinks while the right most cell stays the same size.
Because of 3. column text: "Sergeant McAngryFace"
This text from 2 line want to 1 line with change from 20 60 20 to 22 56 22.
Or use without space for non breaking space and all will 1 lines
Try to change:
"Sergeant McAngryFace" to
"Sergeant McAngryFace"
Unless there's a reason you don't want to, why not set the table width to 100%? Such as:
<table id="UndergradTable" style="width:100%">
JSFiddle
Related
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 have a table with 3 rows, and a fixed height of 500px.
The first row can vary in height in order to accommodate it's content, which varies in length.
The third row never changes and always has the same height, which fits its content.
The second row has a bunch of content which will exceed the cell height, and should be hidden after it exceeds the height of the cell. The height of this row should be based purely on how much the first row takes up.
So to be clear on the height:
Row 1 = x (dynamic)
Row 3 = y (static)
Row 2 = 500 - x - y
I have found a way to do this in Firefox, but it does not work in IE 8. For now I am using javascript to fix it after the fact, but it would be nice if this could be done purely with CSS/HTML.
Here is a basic rendition of how I have it working now.
<table cellpadding="0" cellspacing="0" id="table">
<tr><td id="row1">Row 1 Content</td></tr>
<tr><td id="row2"><div>Row 2 Content. Lots more content here should not cause the table to expand.</div></td></tr>
<tr><td id="row3">Row 3 Content</td></tr>
</table>
#table{height:500px;width:200px;}
#row1,#row3{height:1%}
/* ^^ force cell heights to fix content */
#row2{position:relative;height:99%}
/* ^^ a height must be specified to get the absolutely positioned div to assume the cell's height */
#row2 div{position:absolute;height:100%;width:200px;overflow:hidden;top:0;left:0;}
/* ^^ allows content to overflow the cell without causing the cell to expand */
Unfortunately this does not work in IE. IE will take row 2's 99% height and cause the cell to be as tall as the table's set width (500px), even though this causes the table to be much larger than 500%. I would leave the height style off the row, but then the div inside it doesn't know what height to be.
Currently I use jQuery to set the height of the middle row, based on the height of the other cells, but that is not optimal.
Ideas?
Thanks
Why not use three divs with each floats left or right altogether (maybe you want set margins), where in first uoy leave 'height' css alone, in third set fixed height.
But i dont understand 'Row 2 = 500 - x - y' wchich means that if 1 exceeds 500 height it will be negative height. That should satisfy Chrome,FF, Opera and IE8.
I solved this by not using 3 rows, but instead 2 rows. The first row being dynamic, the second row taking up the remaining space, but then splitting the additional content off into a div, which is attached to the bottom of the cell. The extra content would just flow under the div.
I have an HTML page with a section across the middle of it. This horizontal section uses a <table> and has a custom background image that needs to repeat horizontally across the entire section. This table has 5 elements in it. These elements are statically sized to 140px.
My problem is, I can't get the image to repeat across the remaining space. It's as if the table doesn't stretch the entire width. However, if I set the table width to 100%, the table cells grow beyond 140px.
What do I do? I want the table to fill the entire space. But I want my cells to remain a constant size, and I want the background image to be used.
Thank you!
A <table> is only as big as the cells inside it. So, if you’ve got 5 cells, each 140 pixels wide, the table will only be 700 pixels wide: it won’t stretch across the full width available to it.
You could wrap the <table> in a <div> and put the repeating background image on the <div>, if the 6th cell solution doesn’t work or isn’t preferable.
The sizes of background images are irrelevant to CSS, no help there. Maybe you can hack something in JavaScript, otherwise you will have to know how large your background image is.
Consider wrapping the middle section in a div and applying the background image to the div. Then set the width of your td elements in the table to 140px.
Here is an example. Clearly, you will need to reference your image instead of flurries.png (which is not part of the fiddle so it does not show).
Add a 6th cell and don't specify any width. This will keep the 5 cells at 140px and the 6th cell will be stretched to the end when table width is set to 100%.
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?
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.