title: Responsive table fails in horizontal mode (Bootstrap 3)
body: <p>Although I'm a frequently stackoverflow reader, I haven't written until today. My question is very easy, so easy that I couldn't find any answer. I guess you could help me!</p>
  
  <p>I'm writing a web User Interface for a machine. Everything is fine and I get the info correctly from the different devices. However, as this is one of my first approach to the web design field (and concretely to Bootstrap) I'm having some problems with the data representation.</p>
  
  <p>As you can see, I have a table that is correctly represented when the device is in <a href="http://i.stack.imgur.com/gFo5q.png" rel="nofollow">vertical</a>. However, when the device is in <a href="http://i.stack.imgur.com/YvVxV.png" rel="nofollow">horizontal</a>, it seems that the "responsiveness" of the table doesn't act, and the table is shown "deformed".</p>
  
  <p>In my opinion is very strange, because the "responsive-table" div containing the table is 700px, and as the Bootstrap documentation says, it should show the scrollbar (like in the vertical case). This is my code:</p>
  
  <pre><code>&lt;div id="swPlanStatus-div" class="table-responsive"&gt;
      &lt;table id="swPlanStatus-table" class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                  Node
                  &lt;/th&gt;
                  &lt;th&gt;
                  State
                  &lt;/th&gt;
                  &lt;th&gt;
                  Substate
                  &lt;/th&gt;
                  &lt;th&gt;
                  Group
                  &lt;/th&gt;
                  &lt;th&gt;
                  TCP
                  &lt;/th&gt;
                  &lt;th&gt;
                  Ctrl Mode
                  &lt;/th&gt;
                  &lt;th&gt;
                  Cntrl Type
                  &lt;/th&gt;
                  &lt;th&gt;
                  Goal St.
                  &lt;/th&gt;
                  &lt;th&gt;
                  Freq.
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;AAAAAAAAAAAAAAAAAAA&lt;/td&gt;
                  &lt;td&gt;BBBBBBBBBBBBBBBBBBBBBBBB&lt;/td&gt;
                  &lt;td&gt;CCC&lt;/td&gt;
                  &lt;td&gt;DDDDDDDD&lt;/td&gt;
                  &lt;td&gt;EEE&lt;/td&gt;
                  &lt;td&gt;FFF&lt;/td&gt;
                  &lt;td&gt;GGG&lt;/td&gt;
                  &lt;td&gt;HHHHHHH&lt;/td&gt;
                  &lt;td&gt;IIIIIII&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;/div&gt; &lt;!-- /.table-responsive div section--&gt;
  </code></pre>
  
  <p>Thank you in advance!</p>