How to change table row width
<p>I have a HTML responsive table with Bootstrap styles, the problem is that some cell can have a lot of text, as a result of this my cell looks like this:</p>

<blockquote>
  <p>Header<br>
  text..............<br>
  ....enf of text<br>
  here.</p>
</blockquote>

<p>And what I expect is something like this:</p>

<blockquote>
  <p>(align center)Header<br>
  text.................end of text here.</p>
</blockquote>

<p>I tried adding width style to all the "td", adding "col-md", but nothing works, here is my table:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;



&lt;div class="container"&gt;
  &lt;div class="panel panel-info"&gt;
  &lt;/div&gt;
  &lt;div class="panel-heading"&gt;
    &lt;h4&gt;Table&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="panel-body"&gt;
    &lt;div class="col-md-12"&gt;
      &lt;div class="table-responsive"&gt;
        &lt;table class="table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;td&gt;ID&lt;/td&gt;
              &lt;td&gt;Revision&lt;/td&gt;
              &lt;td&gt;Proposito&lt;/td&gt;
              &lt;td&gt;OpenDate&lt;/td&gt;
              &lt;td&gt;CloseDate&lt;/td&gt;
              &lt;td&gt;Copias&lt;/td&gt;
              &lt;td&gt;Status&lt;/td&gt;
              &lt;td&gt;Owner&lt;/td&gt;
              &lt;td&gt;Model&lt;/td&gt;
              &lt;td&gt;VS&lt;/td&gt;
              &lt;td&gt;Station&lt;/td&gt;
              &lt;td&gt;FollowUp&lt;/td&gt;
              &lt;td&gt;FollowUpNumber&lt;/td&gt;
              &lt;td&gt;&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;00001&lt;/td&gt;
              &lt;td&gt;A&lt;/td&gt;
              &lt;td&gt;Quality Alert New&lt;/td&gt;
              &lt;td&gt;2016-09-21&lt;/td&gt;
              &lt;td&gt;2016-10-21&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;On approve&lt;/td&gt;
              &lt;td&gt;myuser_forRegister&lt;/td&gt;
              &lt;td&gt;XXXX-5554-3332-PA&lt;/td&gt;
              &lt;td&gt;VS04&lt;/td&gt;
              &lt;td&gt;Shippment&lt;/td&gt;
              &lt;td&gt;8D&lt;/td&gt;
              &lt;td&gt;8&lt;/td&gt;
              &lt;td&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>In other words I want to show the table like in the Snippet code, but if you see it in full-page you can see my problem, what can I do?</p>