Geek Answers Handbook

How do I reset td to its own width

Here is a small demonstration of my problem:

http://jsfiddle.net/k2Pqw/4/

After defining the red td to a specific width, I would like to return it to what it was before. Applying 25% will not make it dynamically tune like other td s, it just gets stuck at 25%, which you can see when a black box changes its size.

So, I think my questions are:

  • What is td width before manual installation?
  • How to do this reset?

Any ideas? Thanks for the feedback!

+4
source share
5 answers

How to set its width: auto?

+2
source

It depends on what you want to achieve. If only reset all tds to the default width at once, just use width: auto . However, if you want to revive it there, it is a little more complicated. You need to keep the width of each column in a variable and then animate it.

Here is an updated example from jsFiddle: http://jsfiddle.net/k2Pqw/5/

 $(document).ready(function () { var blaW = $('#bla').width(), beW = $('#be').width(); $("#bla").animate({ width: "500px" }, 1000, function () {}) .animate({width: blaW+'px'}, 1000, function () {}); $("#be").delay(2500) .animate({ width: "500px" }, 1000, function () {}) .animate({width: beW+'px' }, 1000, function () {}); });

And html:

 <table id="myTable"> <tr> <td style="background-color:Aqua;">salamander</td> <td style="background-color:Red;" id="bla">s</td> <td style="background-color:Black;" id="be">s</td> <td style="background-color:Green;">s</td> </tr> </table>
+1
source

It was set to auto . you can see it in Chrome Developer Tools or Firebug under the "Standard Styles" section

0
source

You cannot add or remove a class that defines a specific width. If the class is deleted, it returns to width%.

0
source

If you set any style (not just width ) using JavaScript (or jQuery, since this is just a JS fantasy), you can reset it by setting the style to "" (empty line). This will basically remove this style property from the inline style of the element, allowing the style to take over again.

0
source

More articles:


All Articles