1

I have two table rows (not in the same table) and I've been trying to set width of each table cell (td) in row1 = width of each table cell in row2, but it turns out every time row1 was a little shorter than row2, when I used alert to check respective values of all table cells , I got an ok result, then I inspected the two elements using firebug, and it turns out that for example, on setting a table cell value as 53px, the computed value was 53.2167px, while computed width of other respective table cell in row1 was only 53px , I guess thats all what's making the difference. is there any way to get that exact value (53.2167px) using jQuery ?

screenshot:

Community
  • 1
  • 1
Peeyush Kushwaha
  • 3,453
  • 8
  • 35
  • 69
  • Are you saying a difference of 0.2167px is visible on the screen? And how do you set the width, with em, percentages etc. ? – adeneo Sep 07 '12 at 07:47
  • yeah, difference of all the table cell's add up to make the row look shorter by 1 or two pixels – Peeyush Kushwaha Sep 07 '12 at 07:48
  • demo would be quiet complicated. i'll get the screenshots. – Peeyush Kushwaha Sep 07 '12 at 07:52
  • 1
    A pixel is a pixel, you can not light up 21.67% of it on the screen. What you need to do is calculate the rows width (using for instance Javascript) and add the difference (in your case 1px) somewhere. I normally add it to the last column. – Henrik Ammer Sep 07 '12 at 07:55
  • if are you using .width() try using .outerWidth() to get the width of the row including margin. [http://api.jquery.com/outerWidth/](http://api.jquery.com/outerWidth/) – Andrei R Sep 07 '12 at 08:07
  • @AndreiR tried, it wont work, outerWidth() is a lot bigger than needed. – Peeyush Kushwaha Sep 07 '12 at 08:20
  • @HenrikAmmer i thought of that too, but as you can see, i am trying to create persistent table headers, and it may not look very elegant if i did that.. – Peeyush Kushwaha Sep 07 '12 at 08:21
  • @Peeyush Does this only happen in Firefox? I found [this article](http://treehouseagency.com/blog/tim-cosgrove/2011/01/22/putting-letter-spacing-under-microscope) regarding fractional pixels in `letter-spacing` in Firefox. It might be related. – Henrik Ammer Sep 07 '12 at 08:26
  • Why not loop through the ``s of the contentrows and set their width to the headers ``s? – Henrik Ammer Sep 07 '12 at 08:34
  • @HenrikAmmer yeah it happens only in firefox, in chrome, the content looks pretty good, i have an alternative script too which can make things look good in firefox, but unfortunately it dosent work well in chrome, if i am unable to find any cross-browser compatiable script i may go forward with browser detection technique with different codes for both browsers – Peeyush Kushwaha Sep 07 '12 at 08:52

1 Answers1

1

Do this in your environment should do the trick of setting correct widths to the headers tablecells vs the contents.

Example

HTML

<table id="theHeader">
    <thead>
        <tr>
            <th>Test</th>
            <th>Test</th>
            <th>Test</th>
            <th>Test</th>
        </tr>
    </thead>
</table>

<table id="theContent">
    <tbody>
        <tr>
            <td>Testing</td>
            <td>Testing</td>
            <td>Testing</td>
            <td>Testing</td>
        </tr>
    </tbody>
</table>

jQuery

var headerColumns = $('#theHeader thead tr:first-child th');
var contentColumns = $('#theContent tbody tr:first-child td');

for(i=0; i<contentColumns.length; i++){
    $(headerColumns[i]).css('width',$(contentColumns[i]).width()+'px');
}​

jsFiddle

http://jsfiddle.net/xWbhM/

Henrik Ammer
  • 1,889
  • 13
  • 26
  • Heh. Now that is weird! Even if the `padding` is removed it still makes the header ``s one pixel less in width. And I'm on Chrome while testing btw. – Henrik Ammer Sep 07 '12 at 09:19
  • I wonder if it could be that the th/td have borders on both sides but since the border collapse in the table and overlap it therefor takes on pixel back? – Henrik Ammer Sep 07 '12 at 09:20
  • See this example with `
    `s instead of tables, http://jsfiddle.net/VynWE/, and it works as expected.
     – Henrik Ammer Sep 07 '12 at 09:24
  • nvm, i guess its because tables should have a fixed width, try setting table{width:300px} and it would work . btw your code when integrated with mine works fine on chrome, just like my previous code was, but dosent work properly with mozilla, as my code has a few other elements. it works fine initially, but when i hide one whole column using jquery and have to again recalculate values for header, it dosent work there, i guess i'll go with browser detection with separate code for mozilla till i get an better alternative. – Peeyush Kushwaha Sep 07 '12 at 09:29
  • Actually, my above fiddle, http://jsfiddle.net/xWbhM/1/ does work for me in Firefox but not in Chrome. Do you get the same result? Still weird though. :) – Henrik Ammer Sep 07 '12 at 09:35
  • you are right :O but still header is shorter by a pixel. weird :P – Peeyush Kushwaha Sep 07 '12 at 09:57
  • Check this answer out, http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body/1312678#1312678. Works in modern browsers (and IE8) and might be possible to apply to your needs. You should give it a go. – Henrik Ammer Sep 07 '12 at 13:38
  • I also found this (when doing something else) http://ejohn.org/blog/sub-pixel-problems-in-css/ and http://css-tricks.com/percentage-bugs-in-webkit/. An old problem that still exists. – Henrik Ammer Sep 07 '12 at 19:34
  • @PeeyushKushwaha If you are still looking for something I found this resource, https://github.com/kingkool68/stickyHeader, today (when searching for something else). It seems to do the trick of what you want and come highly recommended by a lot of users. – Henrik Ammer Sep 14 '12 at 07:07