Reputation: 137

How do I reset a td to it's native width

Here is a small demonstration of what my problem is:

After sizing the red td to a certain width, I would like to set it back to what it was before. Applying 25% will not make it adjust dynamically like the other tds, it's just stuck at 25% which you can see when the black box changes it's size.

So I guess my questions are:

What is a td's width before it is set manually?
How do I reset it?

Any ideas? Thanks for the feedback!

Upvotes: 4

Answers (5)

Samuel Hapak

Reputation: 7192

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

Here is 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>

Upvotes: 1

Niet the Dark Absol

Reputation: 324650

If you have set any style (not just width) using JavaScript (or jQuery, since it's just fancy JS), then you can reset it by setting the style to "" (empty string). This will basically remove that style property from the element's inline style, letting the stylesheet take over again.

Upvotes: 0