Edit 2:
Problem seemed to reside on "bigTable" elements th rules. Apparently th's were inheriting wrong min-width's when used on layout-template. I'm still investigating this.
Still, I'm going to give one more try for divs. One big problem was using fixed nav and dynamic content, but I already found Holy Grail -solution for this (http://alistapart.com/article/holygrail).
Thanks for suggestions & all the lovely trolololo.
Edit:
I replicated this problem to http://jsbin.com/eyitij/4/edit
I have a strange problem with table + td width. I have code similar to this:
<table class="mainLayout" style="width: 100%;">
<tr>
<td style="width: 250px;">
<div id="leftNavigationPanel"> * content * </div>
</td>
<td id="panelCell">
<div class="panel">
<table id="bigTable" width="100%"> * LOTS OF CONTENT, includes big table * </table>
</div>
</td>
<tr>
</table>
When I run this code on browsers, mainLayout is getting overflowed, so it becomes 3600px, and this happens because of big table inside Panel.
Big table I'm referring to can be contained within screen. When done so, it gets horizontal scrollbar (which is what I want). This works if big-table is loaded in separate html-file with rule "width: 100%".
After adding mainLayout a rule "display: block;", mainLayout table is rendered ~1800px and is contained within screen, but problem is that "panelCell"-TD is still ~3400px wide, so I'm still having whole page scrolling... TD isn't contained within table, but always expands to 250px + bigTable.width() !?
Basically browser doesn't know how to calculate "panelCell" to fill only : window.width - leftNavigationPanel.
Any ideas how to make right rules without using javascript + precalculated max-width rule for "panelCell"?
panelCell must be contained within window
bigTable must be contained within panelCell, with scrollbar
Setting table-layout:fixed fixes a lot of weird problems with tables :
<table style="table-layout:fixed;">
<col style="width:250px"/>
<col/>
<tr>
...
Related
I have a table with table-layout set to fixed. In the first row I have a td with text inside. It's something like:
<table>
<tbody>
<tr>
<td colspan="2" style=" min-width: 250px; width: 100%;">
<b>Vendor/Firm Information</b>
</td>
</tr>
<tr>
some content
</tr>
... and so on
</tbody>
</table>
So, the width of the first row is actually less than 250px. It's even less than content. So, I need to know: is there any reason for that? Is there something that don't allow the table cell to take appropriate width?
I use old version of Chrome (22.0.1229.0) and I think that it's rather a bug than incorrect styles.
In latest Chrome everything is alright.
I think that colspan="2" there is the reason.
There is no reasonable way to split that min-width between two spanned columns. So min-width constraint just get ignored on spanned cells.
Please see the response here:
Chrome, Safari ignoring max-width in table
The gist is that "max-width" only applies to block elements. So setting the table to "display: block;" should resolve the issue.
I've got an IE7 issue i need some help with. I'm loading in a table of data via ajax and php. Works fine everywhere except IE7 (doi).
The problem is that there isn't a vertical scrollbar after it loads several hundred records.
I've checked into the position and overflow bugs (like here: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/) but have still had no luck as of yet.
The arrow keys don't work, either. Only way to see what's below the fold of the browser window is to click and drag.
Any help is appreciated.
=================
UPDATE:
Wanted to include some images of what's going on. Can't give access to the page/files, has sensitive information. Hopefully this can help a bit, though.
Before:
After:
The code for the table goes something like this:
<div class="row hide" id="spend-table" style="display: block;"><table border="0" cellpadding="4" cellspacing="0" id="spend">
<thead>
<tr>
<th style="display: none;">Id</th><th>Name</th><th>City</th><th>State</th><th>Vendor</th><th>Catalog#</th><th>Fac#</th><th>Desc</th><th>Quantity</th><th>UOM</th><th>Total</th><th>Highest</th><th>Lowest</th></tr>
</thead>
<tbody>
<tr>
<td style="display: none;">35816</td><td>Boblawblaw</td><td>Law BLog</td><td>KY</td><td>The Avengers</td><td>DE878Z</td><td>12091</td><td>Canned Butterscotch</td><td>1</td><td>YR</td><td>$127.13</td><td>$127.13</td><td>$127.13</td><td style="display: none;">2</td></tr>
</tbody>
</table></div>
The table's parent div is hidden initially, but after the search is performed (via AJAX & Codeigniter) the results are kicked back from CI using the Table class to populate the div with the new info (table).
Just to be clear: all the records show up as they ought. You can click and drag to see everything. It's simply an issue of scroll/overflow/etc. getting overlooked in IE7.
Thanks!
===================
Another update:
The table, the table's containing div, and that div's containing div all have heights of 800+. The body, however, is stuck at 348px. Have zoom, position, and overflow attributes set. Out of ideas :\
#mikedidthis helped out big time in the chat room.
i had added too many overflows throughout. removed it from the body by changing to overflow: auto !important; and removed from the .container
the overflow bug fix ended up becoming the bug itself :p thanks for all the help and commentary.
best,
In the following example,
<table style="width: 100%;"><tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr></table>
How do I set the widths so that the first cell/column is exactly as wide as it needs to be to show the content of the first cell and let the second cell fill the rest of the width of the table?
I'm using a GWT HorizontalPanel to do this, so if there's either a html, css or gwt trick. Please let me know.
Thank you
Assuming that “as wide as it needs to be to show the content of the first cell” refers to width needs to show the content without line breaks, you can use something like this:
<table width=681 border><tr>
<td nowrap>First Cell</td>
<td width="100%">Second Cell</td>
</tr></table>
There is no guarantee that this will keep working, since requiring a cell to be 100% wide, yet include another cell with nonzero width, is an impossible requirement. But browsers currently do what seems to be closest to the requirement.
You could achieve the layout you’re aiming for without tables, as explained in this question:
xHTML/CSS: How to make inner div get 100% width minus another div width
HTML
<div class="two-columns">
<div class="fit-to-contents">First Cell</div>
<div class="fill-remaining-space">Second Cell</div>
</div>
CSS
.two-columns {
overflow: hidden;/* Contains descendant floats */
}
.two-columns .fit-to-contents {
float: left;
background: #ffd;
}
.two-columns .fill-remaining-space {
overflow: hidden;
background: #fdf;
}
I’m not sure if that would actually be appropriate for your use-case though, I’d need to see the context.
Tables take care of themselves in HTML. There is no need to force any cell to be any particular size.
What is it you're really trying to do?
What version of HTML are you using? (Hint: Upgrade to HTML5 and CSS!)
Just don't specify any widths at all (neither on the table nor on the cells) and use white-space: nowrap on your table cells.
Put a style of width:1px on the first cell. The table will then make the first cell as narrow as possible, without causing overflow.
Since "as narrow as possible" is the width of the word "First" in this case, you may want to throw in a white-space:nowrap too, otherwise it will display "First" and "Cell" on two lines.
Jsfiddle
I have the following table in my HTML:
<div style="max-width:700px;">
<table border="1">
<tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
<tr><td width="1px">a:</td><td >b</td></tr>
<tr><td width="1px">c:</td><td >d</td></tr>
</table>
<div>
I want the first column width in the second and third row to just fit the content length (that is why I put width="1px" there). In the mean while, I want to table width to just fit the length of the longest content in the table (which is the first row) instead of spanning to the max-width of its bounding div.
It works in Firefox as shown below.
However, in IE 9 it does not work as expected, as shown.
I tried to replace width="1px" with width="1%". But then the table width will span to the max-width of the parent div.
Does anyone know how to fix it in IE?
I have just tested in my IE9, and setting the width to 1px works. But it displays as you presented above in compatibility mode. Have you declared your doctype and all other fun stuff?
It might be because you are using older methods to display the table. You could try styling the table with borders and so on in CSS - such as:
table, td, tr, th{
border:1px solid #f0f;
}
.onepx{
width:1px;
}
<div style="max-width:700px;">
<table>
<tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
<tr><td class="onepx">a:</td><td>b</td></tr>
<tr><td class="onepx">c:</td><td>d</td></tr>
</table>
<div>
and so forth - I am sure you get the idea. this might stop it automagically displaying in compatibility view (if it is the problem).
And finally, because IE9 is so stupid, you will have to turn off the compatibility view (if it is enabled on the page), because all pages within the domain will be viewed in compatibility view.
You mentioned that you have tried setting it to 1%, did you set the other to 99%?
<tr><td width="1%">a:</td><td width="99%">b</td></tr>
<tr><td width="1%">c:</td><td width="99%">d</td></tr>
I have a table with cell coded as follows
<td valign="top" class="weekend_days">
<div class="block_out">
<div class="blockout_text">Some content ...Some content ...Some content ...Some content ...Some content ...</div>
</div>
</td>
In the CSS, I have defined a height for the div as;
.block_out {height: 50px;}
I have just included the relevant style here.
Now in IE, the cell expands if the content increases, but in Firefox, it does not expand if content is more.
How do I fix this issue (I would not be able to directly remove the height attribute as it is used in multiple places) ?
Try this:
.block_out {min-height: 50px;}
Example min-height: http://jsfiddle.net/35bsF/2/
Example height: http://jsfiddle.net/35bsF/3/
You may want to include table-layout:fixed; in your table-tag:
<table style="table-layout:fixed;">
This will force IE to listen to the dimensions you set. There are quite a few similar posts about this on stackoverflow already.
Uses this solution if you don't want your table to expand.