Question

I’m opening exceptionally my website (with my 3rd high performance framework), in hoping that someone will help me to solve the problem.

Here’s the page that works flawlessly, go there:

http://www.papdevis.fr/recherche/

You will see this:

Click on this (fake) button:

"De l'aide ? Cliquez ici"

When you click on the button, its size doesn’t change (that’s what I want), like this:

See? It’s opening great, that’s nice!

Now same JavaScript, same ids, but in a table:

http://www.papdevis.fr/devis-creer-editer/

You will see this:

Click on the same (fake) button:

"De l'aide ? Cliquez ici"

And errrrrrrg!!! the width changes! See how:

See? How comes it doesn’t work? I absolutely don’t know where the problem comes from.
I’ve been trying to change td sizes and everything I could find (including dozens of jquery/table/resize stackoverflow questions) but I didn’t manage to “show” the “help” <tr> properly: it’s never resized to the right width.

This code in the js file metier.js is problematic:

slides.hide();
$('#slideInner').fadeOut('slow', function() {
  $(divEnglobe).show('slow', function() {
    slideWidth = $(divTailleReference).innerWidth();
    slides.css({
      'float' : 'left',
      'width' : slideWidth
    }); 
    slides.show();

How comes?

Answer 1

td and tr elements are inline elements and cannot have a width.

If you would make the elements display: inline-block, it would work!
It is supported in all major browsers.

Edit: I quickly posted a possible answer, but I now see that your code already works like you intended in my browser (Chrome, Windows 7). The problem might be something else!