Colums resize when using JQuery UI's toggle in

2019-08-20 10:54发布

问题:

Example code:

<html>
  <head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
  </head>
  <body>

    <table border="1" style="width:100%">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr>
            <td colspan="4" >
                <div id="target">TOGGLE TEXT!!</div>
            </td>
        </tr>
    </table>

    <input type="button" value="show/hide" onclick="toggleHidden();" />

    <script type="text/javascript">

        function toggleHidden() { 

            $('#target').toggle("blind", {}, 200, null);
        }

    </script>

  </body>
</html>

This code hides and shows a div in a td, using JQuery UI's toggle function (same result with the show and hide functions).

In FireFox this works great, but in IE all the columns will resize during the "toggle effect". Does anyone know why IE behaves like this? And if there is anything I can do in this code to prevent it from happening?

回答1:

Using slideToggle instead of toggle or hide/show actually solved the problem!

回答2:

I have faced a similar problem. Try two things:

1) Give the table an absolute width in pixels, e.g. 500px

2) Try putting a non-breaking space   in the TD containing your target div, after the div to prevent the browser from collapsing the cell when there's no content in it:

<div id="target">TOGGLE TEXT!!</div> 