title: Tables in twitter-bootstrap carousel?
body: <p>I'm playing with backbone.js and I'm looking at abusing the bootstrap-carousel plugin to make view transitions a bit more shiny.</p>
  
  <p>When transitioning from an item containing a table to another item the slide proceeds nicely. However, when transitioning <em>to</em> a table, the table does not appear until after the slide has completed.</p>
  
  <p>See this <a href="http://jsfiddle.net/RichardTowers/XtWVQ/" rel="nofollow noreferrer">jsFiddle</a> for a demo.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- Carousel items --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item"&gt;
        &lt;table class="table table-bordered table-striped"&gt;
          &lt;tr&gt;
            &lt;th&gt;Key&lt;/th&gt;
            &lt;th&gt;Value&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;bootstrap&lt;/td&gt;
            &lt;td&gt;Awesome&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;Second&lt;/div&gt;
      &lt;div class="item"&gt;Third&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Carousel nav --&gt;
    &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
    &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$('.carousel').carousel({
    interval: false
  });​
  </code></pre>
  
  <p>Is this something I'm doing wrong, an inevitable consequence of how these transitions work or a small bug with bootstrap?</p>
  
  <p>(Reproducible in Chrome 21 &amp; 22, Firefox 14 and Safari 5.1.7)</p>
  
  <p>Screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/yXC5v.png" alt="Half way through the to-table transition"></p>