I'm trying to achieve a basic fixed table header effect. For this I'm using two tables with the exact same markup and CSS. The "content" table is in a div with overflow-y set. Everything looks fine except IE7 and Opera where the "header" table has different column widths than the "content" table.
Here is a jsfiddle: http://jsfiddle.net/gEtGW/1/
Please let me know if you have an idea about this.
Thanks!
EDIT:
In your HTML, you have this...
<table class="inner-table">
<colgroup>
<col width="83">
<col width="92">
<col width="123">
<col width="120">
<col width="177">
<col width="84">
</colgroup>
Where the widths above all add up to 679 total.
However, in your CSS, you have this...
.inner-table {
width: 680px;
}
I'm not sure what each browser is supposed to do with the extra/missing pixel or how they decide whether the one pixel discrepancy is one extra pixel or missing one pixel. 679 versus 680... which one takes precedence?
Though, I'm sure every browser will probably render this differently.
Ok problem found (The problem is a text-style one):
'Column' text is making the bounds of the column celd change
For example change 'column' for 'col' and you see it like this:
http://jsfiddle.net/qYnPU/
I had this exact same problem and I first tried to solve it in the same way you are doing it. But that led nowhere -- just because of the kinds of cross-browser issues you're seeing. I spent days and days trying to make it right. I finally gave up on the two-table approach. Instead, I made a div with the table header material, calculating the width of each header element from the first row of the content table. It has worked flawlessly in all browsers. I posed a question like yours over here on SO. You might want to give it a look.
Here is the table using the new scheme.
HTH
Related
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,
Not a Drupal question, but probably a CSS/HTML question:
I have written a module for Drupal 7 with Bartik theme, which displays a button "Show". When clicked it will fetch JSON data from a PHP script and generate a HTML table as string and finally display that table inside (or instead?) of a <div id="top"></div>
This whole complex stuff (at least for me) works surprisingly fine:
However I have this minor cosmetic problem: I can not get rid of the fine white line between the tabel cells.
I've added <table border="0" cellspacing="0" inline - this doesn't help.
I've added an id to the table <table id="last" and CSS-code:
#last {
border:0;
cell-spacing:0;
}
but this doesn't work either.
When I inspect in Mozilla Firebug or Chrome dev. console - those attributes are there.
Also, I have a non-Drupal page too - it doesn't show those ugly lines.
Any ideas please?
I've read, there are CSS stylesheets, which supposedly reset everything, but they are probably overkill for my problem.
My jsFiddle code works too, but doesn't have the ugly white lines...
I'm not posting the URLs of the above mentioned pages, because they both are in Russian and require registration.
There does not seem to be any code or URL that actually demonstrates the problem, but you could use the brute-force method of adding the following into the stylesheet:
td { border: none !important; }
It sounds like the problem is caused by some CSS code setting a border on the cells, overriding whatever you might set at the table level.
If this does not help, we at least know that the problem is caused by something else than the table and cell elements (perhaps some elements inside the cells?).
It it does help, inspect the td cells to see what is now causing the borders, and write a stylesheet that is sufficient to override that (or edit the settings that cause the borders).
Try giving this:
table {border-collapse: separate;}
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>
...
What are good practices when selecting column widths in a table?
Let's say I have four columns, name (variable width), description (long content of text), count (max 3 chars), date (fixed format).
What would be a good practice? I'm thinking fixed width for descr., count and width (thus actually also making name "fixed" width).
But my real question is, how to select a particular width size.
For instance, if the date format is yyyy-MM-dd is there some trick to convert those 10 chars to a width which will guarantee that it shows ok in any browser using any font and font-size (without also taking up any excessive space)?
edit: With fixed I mean something akin to "fixed amount of pixels relative to font width"
You can declare white-space: nowrap; on all the cells that you want to stretch as much as they need without using extra space (name, date, count), and then simply give your remaining cell a width of 100%. This way the 100% wide cell will expand as much as possible, without causing the other cells to collapse on multiple lines.
If you want to save yourself lots of markup...
First, if by fixed width you mean a fixed percentage, add the following to your stylesheet:
.width1 {
width: 1%;
}
.width2 {
width: 2%;
}
.width99 {
width: 99%;
}
.width100 {
width: 100%;
}
This gives you the flexibility you need if you decide to apply an odd percentage width for any of them if you wish - for example width23 on one of them, width 27 on another.
Now this is the clever bit. Using the col tag, you can apply widths just once instead of on every cell. I know you can apply widths to just the first row, and they will set the widths for the same cell in every other row - but the col tag can be used for setting other properties too. For example:
<table class="width100">
<col class="width15" style="background-color: #cccccc;" />
<col class="width65" />
<col class="width10" />
<col class="width10" />
<tr>
<td>My Sample Name</td>
<td>My Sample Long Description</td>
<td>5</td>
<td>2010-Oct-08</td>
</tr>
</table>
I generally prefer to use this technique - but if it is a layout I will be using on multiple tables (for example the customers table may be the same layout as the agents table) then I will create a class for each column and set the width etc in that class. I will then apply the relevant class to each cell. I suppose both methods could be combined - the relevant class could be applied to the relevant col, but the fact that the properties are set in one place (the stylesheet) means that you only have to change it in once place.
Hope this helps and that it is what you are looking for.
Richard
I want different styles on each column of a table. I've read that you could do that by using <colgroup> or <col>, but I had no luck. I have an example here, and nothing seems to change. Am I doing something wrong? Will this work on xhtml?
I know I could add a "class" attribute on each <td>, but that seems weak.
That's correct. While colgroup itself is supported by all browsers, this isn't true for the attributes of the inner col element. Of possible attributes, only width is supported on all browsers. But unlike CSS, <col width=""> only supports pixel and percentage widths.
Don't use it. Instead, create CSS classes and assign them to each td. Yes, it sucks.
EDIT Updated link above to page with better information
Set your table-layout to auto instead of fixed...
table {table-layout: auto;}
My personal site supports multiple themes and I see these kinds of differences all the time.
You could use css selectors to get similar results without adding extra classes.
As an example if you want to give specific style to a second column you can use:
table>tbody>td:nth-child(2){font-weight: bolder;}
Here is a trick I used which actually worked well. In an generic (site wide) css file I put:
.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}
and so on up to whatever I felt was the maximum number of columns in any table I would ever need on my site.
Then on each table I could define the width with a style such as:
<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">
This made it easy to set the column widths plus I could add code to resize the columns which simply had to change the style property on the table for the desired column. This avoided having to make numerous CCS entries every time I wanted to define the column widths for a table. To change a column width you could use something like this:
document.getElementById("tbl1").style.setProperty("--w2", "123px");
The above simply changes the width of column 2 by changing the --w2 variable value.
If you really need to use cols tags without react restriction then dangerouslySetInnerHTML will help:
<colgroup dangerouslySetInnerHTML={{
__html: `
<col style="background: red;"/>
<col style="width: 20px;"/>
`
}}/>
Note that while this works this is not the recommended way to work with react.
In 2020, if you want different styles on columns, you can:
1. style/CSS <col>, but for only a few properties
2. use th/td:nth-child(#number) in CSS (my preferred solution, no idea about what happens with colspans)
3. manually add a class to the th/td elements
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns
You're not supposed to use the "width" HTML attribute, instead use style/CSS. In the style/CSS for <col> you're supposed to use only "border", "background", "width" and "visibility". You can use ems to express values.
I'm confused: w3 says "The 'width' property gives the minimum width for the column." which looks contradictory to me, given the existence of a "min-width" property. On Firefox 72 (Ubuntu)
<col style="width: 13em">
sets a "fixed" width (as I expected). If I resize the window, narrowing it, the column is resized and the content is wrapped into more lines.
So I just had this same issue... the real problem is that even when style/CSS is used on <col> (rather than HTML attributes), you can still only style the following things:
width
borders
background colors
visibility
Source: https://www.w3.org/TR/CSS21/tables.html#columns
It is working for me like this with colgroup and col
<colgroup align="center">
<col style="background-color:red">
<col style="background-color:yellow">
<col style="background-color:green">
</colgroup>