title: Applied bootstrap, then table cells collapsed
body: <p>I added bootstrap to my page to solve a different problem, then I noticed that my table cells in another place had all collapsed:</p>
  
  <p><a href="https://i.stack.imgur.com/HOkyv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HOkyv.jpg" alt="collapsed table cells"></a></p>
  
  <p>How do I get the cells to auto size to their contents? I've seen posts about changing the width of cells, but I need to change their height back to their pre-bootstrap settings.</p>
  
  <p>Here is my code:</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-css lang-css prettyprint-override"><code>.countdown_table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
  }
  
  .countdown_table tr td {
    font-family: 'proxima-nova', sans-serif;
    padding-right: 20px;
    color: white;
    text-align: center;
  }
  
  .units {
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
  }
  
  .numbers {
    font-size: 700%;
    font-weight: 100;
    letter-spacing: 0;
    text-align: center;
    background: #e18b35 !important;
    font-family: 'proxima-nova', sans-serif;
    color: white;
  }
  
  #secondElem {
    width: 97px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;table class="countdown_table" border="1"&gt;
    &lt;tr&gt;
      &lt;td class="numbers" id="dayElem"&gt;04&lt;/td&gt;
      &lt;td class="numbers"&gt;:&lt;/td&gt;
      &lt;td class="numbers" id="hourElem"&gt;02&lt;/td&gt;
      &lt;td class="numbers"&gt;:&lt;/td&gt;
      &lt;td class="numbers" id="minuteElem"&gt;47&lt;/td&gt;
      &lt;td class="numbers"&gt;:&lt;/td&gt;
      &lt;td class="numbers" id="secondElem"&gt;04&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="units"&gt;
      &lt;td&gt;days&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;hours&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;minutes&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;seconds&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>