title: Enforce equal rows height for small screen
body: <p>I am using this <a href="https://nespero.com/fluent/jquery/docs/content/table/" rel="nofollow noreferrer">Bootstrap tables</a> from Fluent Kit framework and as you can see on small screen, text in cells goes to the new line instead of expanding for all the width available, which is infinite as it's inside the <code>.table-responsive</code> wrapper.</p>
  
  <p>In the code below, the fifth "Engine" column is an example of this behaviour:</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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.2.0/css/fluent-kit.min.css" rel="stylesheet"/&gt;
  
  &lt;table class="table table-responsive"&gt;
    &lt;caption&gt;Last week statistics&lt;/caption&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Make&lt;/th&gt;
      &lt;th&gt;Model&lt;/th&gt;
      &lt;th&gt;Origin&lt;/th&gt;
      &lt;th&gt;Producent&lt;/th&gt;
      &lt;th&gt;Doors&lt;/th&gt;
      &lt;th&gt;Engine&lt;/th&gt;
      &lt;th&gt;Petrol&lt;/th&gt;
      &lt;th&gt;First release&lt;/th&gt;
      &lt;th&gt;Price 2016&lt;/th&gt;
      &lt;th&gt;Price 2017&lt;/th&gt;
      &lt;th&gt;Maximum speed&lt;/th&gt;
      &lt;th&gt;Gears&lt;/th&gt;
      &lt;th&gt;Manufactured&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Audi&lt;/td&gt;
      &lt;td&gt;R8&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
      &lt;td&gt;Audi&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;R8 V8 4.2 FSI quattro&lt;/td&gt;
      &lt;td&gt;Gasoline&lt;/td&gt;
      &lt;td&gt;2006&lt;/td&gt;
      &lt;td&gt;$1.000.000&lt;/td&gt;
      &lt;td&gt;$950.000&lt;/td&gt;
      &lt;td&gt;375 km /h&lt;/td&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Audi&lt;/td&gt;
      &lt;td&gt;R8&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
      &lt;td&gt;Audi&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;R8 V8 4.2 FSI quattro&lt;/td&gt;
      &lt;td&gt;Gasoline&lt;/td&gt;
      &lt;td&gt;2006&lt;/td&gt;
      &lt;td&gt;$1.000.000&lt;/td&gt;
      &lt;td&gt;$950.000&lt;/td&gt;
      &lt;td&gt;375 km /h&lt;/td&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Audi&lt;/td&gt;
      &lt;td&gt;R8&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
      &lt;td&gt;Audi&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;R8 V8 4.2 FSI quattro&lt;/td&gt;
      &lt;td&gt;Gasoline&lt;/td&gt;
      &lt;td&gt;2006&lt;/td&gt;
      &lt;td&gt;$1.000.000&lt;/td&gt;
      &lt;td&gt;$950.000&lt;/td&gt;
      &lt;td&gt;375 km /h&lt;/td&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Which looks off, like here:</p>
  
  <p><img src="https://i.stack.imgur.com/lVo1N.jpg" alt="my table example"></p>