<p dir="auto">I'm having a problem with tables not being responsive. The rest of the content is responsive, except for my table.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-lg-12&quot;&gt;
            &lt;table class=&quot;table table-bordered table-hover&quot;&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;&lt;input type=&quot;checkbox&quot;/&lt;/th&gt;
                        &lt;th&gt;Title&lt;/th&gt;
                        &lt;th&gt;Content&lt;/th&gt;
                        &lt;th&gt;Date&lt;/th&gt;
                        &lt;th&gt;Author&lt;/th&gt;
                        &lt;th&gt;Category&lt;/th&gt;
                        &lt;th&gt;Keywords&lt;/th&gt;
                        &lt;th&gt;&lt;i class=&quot;icon-comments&quot;&gt;&lt;/i&gt;&lt;/th&gt;
                        &lt;th&gt;Status&lt;/th&gt;
                        &lt;th&gt;Other&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;"><pre class="notranslate"><code class="notranslate">    &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
            &lt;table class="table table-bordered table-hover"&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;&lt;input type="checkbox"/&lt;/th&gt;
                        &lt;th&gt;Title&lt;/th&gt;
                        &lt;th&gt;Content&lt;/th&gt;
                        &lt;th&gt;Date&lt;/th&gt;
                        &lt;th&gt;Author&lt;/th&gt;
                        &lt;th&gt;Category&lt;/th&gt;
                        &lt;th&gt;Keywords&lt;/th&gt;
                        &lt;th&gt;&lt;i class="icon-comments"&gt;&lt;/i&gt;&lt;/th&gt;
                        &lt;th&gt;Status&lt;/th&gt;
                        &lt;th&gt;Other&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
</code></pre></div>
<p dir="auto">Is this just my code or is it really not working?</p>
<p dir="auto">This remains a big weakness in twitter bootstrap.<br>
It's hard to kludge this.<br>
What would be good is a way to automatically have data tables of any width turn into 1-column lists with the table header first, then the data, with appropriate word wrapping.<br>
e.g.<br>
Header 1 Header 2<br>
Data1       Data2<br>
becomes</p>
<p dir="auto">Header1<br>
Data1<br>
Header2<br>
Data2</p>
<p dir="auto">There's blog posts on this<br>
one example: <a href="http://css-tricks.com/examples/ResponsiveTables/responsive.php" rel="nofollow">http://css-tricks.com/examples/ResponsiveTables/responsive.php</a><br>
<a href="http://mobifreaks.com/user-interface/responsive-and-seo-friendly-data-tables/" rel="nofollow">http://mobifreaks.com/user-interface/responsive-and-seo-friendly-data-tables/</a></p>
<p dir="auto">Thank you, Tom</p>