Databases
StackOverflow2013
Postsdbo
POHTML <col> "width" property producing different results in different browsers?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML <col> "width" property producing different results in different browsers?
    primarykey
    data
    text
    <p>I'm hoping this isn't a situation in which I need to resort to browser detection.</p> <p>Basically I have a <a href="http://hoop-data.com/players/" rel="nofollow">page</a> with a large table, so I've created an additional header with a "position: fixed" property that appears (and stays visible) when you scroll down the page (using some really simple JS code). </p> <p>However, in order to get the columns of that header to line up correctly with the columns of the larger table, I've been manually setting the "width" property of each column (for both tables), because my fixed header cells aren't exactly the same as my normal table header cells, due to lacking an extra background-image. (All of this is probably easier to understand if you just look at the page itself through the link above.)</p> <p>The problem is that one set of widths works for Firefox, while another works for Safari/Chrome, and neither works for Opera. I'm guessing my CSS may not be optimal to handle this kind of situation but I don't know how to make it better. Could anyone take a look (maybe using Firebug, etc.) and let me know if there's a better way to handle this that would make everything line up in every browser?</p> <p>UPDATE: By playing around with the issue in Firebug I've narrowed down the cause. First a little bit of background. Instead of creating a totally separate class of table for my "floating" header, I've given it a special ID ("floater") and allowed it to inherit most of the CSS from my normal table, except I've changed the background image to a transparent one of the same size (to preserve spacing) and set "display: none." My JS, which I'm pasting here:</p> <pre><code>$(window).scroll(function () { var header = document.getElementById("floater"); if (($(window).scrollTop()) &gt; ($(document).height() / 142)) { header.style.display = "block"; } else { header.style.display = "none"; } }); </code></pre> <p>then causes "display" to change to "block" if you scroll past a certain point down the page. </p> <p>What I've discovered is that if I load up the page and, before I try scrolling at all, use Firebug to disable the "display: none" style setting, the floating table's cells are perfectly spaced. However, as soon as I start scrolling down the page and the JS kicks in, the column widths change! But at that point, if I go into Firebug and disable "display:block" in the CSS panel, it fixes the alignment.</p> <p>So <code>header.style.display = "block";</code> is not doing what I want; instead of just reversing the "display:none" CSS (which is what I do want), it's somehow resetting the column widths. Ditto for <code>header.style.display = "inline"</code>. Is there another JS statement I can use to simply disable "display:none"?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGChorn
    1. USGChorn
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHTML <col> "width" property producing different results in different browsers?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COA friend of mine struggled with the same type of problems while writing his jQuery plugin (http://blog.slackers.se/2011/01/floating-header-plugin-v140.html). Perhaps it can help.
      singulars
      1. POHTML <col> "width" property producing different results in different browsers?
      1. USpowerbuoy
    2. CO@powerbuoy, thanks very much for the link. I gave it a try but it doesn't seem to work for me. Am I supposed to do anything beside adding `<script type="text/javascript">jQuery("#table").floatHeader();</script>` to my page, and making sure my table has a "header" tag and `id="table"`?
      singulars
      1. POHTML <col> "width" property producing different results in different browsers?
      1. USGChorn
    3. COYou need to include the actual plugin code as well (`<script src="plugin.js"></script><script>$('table').floatHeader()</script>`) and of course you need to include jQuery first of all. Also, if you're running the code _before_ the table HTML is printed you need to run the code on document ready.
      singulars
      1. POHTML <col> "width" property producing different results in different browsers?
      1. USpowerbuoy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload