csshtml-tablebootstrap-4fluent-kit

Enforce equal rows height for small screen

I am using this Bootstrap tables 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 .table-responsive wrapper.

In the code below, the fifth "Engine" column is an example of this behaviour:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.2.0/css/fluent-kit.min.css" rel="stylesheet"/>

<table class="table table-responsive">
  <caption>Last week statistics</caption>
  <thead>
  <tr>
    <th>Make</th>
    <th>Model</th>
    <th>Origin</th>
    <th>Producent</th>
    <th>Doors</th>
    <th>Engine</th>
    <th>Petrol</th>
    <th>First release</th>
    <th>Price 2016</th>
    <th>Price 2017</th>
    <th>Maximum speed</th>
    <th>Gears</th>
    <th>Manufactured</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Audi</td>
    <td>R8</td>
    <td>Germany</td>
    <td>Audi</td>
    <td>3</td>
    <td>R8 V8 4.2 FSI quattro</td>
    <td>Gasoline</td>
    <td>2006</td>
    <td>$1.000.000</td>
    <td>$950.000</td>
    <td>375 km /h</td>
    <td>7</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Audi</td>
    <td>R8</td>
    <td>Germany</td>
    <td>Audi</td>
    <td>3</td>
    <td>R8 V8 4.2 FSI quattro</td>
    <td>Gasoline</td>
    <td>2006</td>
    <td>$1.000.000</td>
    <td>$950.000</td>
    <td>375 km /h</td>
    <td>7</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Audi</td>
    <td>R8</td>
    <td>Germany</td>
    <td>Audi</td>
    <td>3</td>
    <td>R8 V8 4.2 FSI quattro</td>
    <td>Gasoline</td>
    <td>2006</td>
    <td>$1.000.000</td>
    <td>$950.000</td>
    <td>375 km /h</td>
    <td>7</td>
    <td>Germany</td>
  </tr>
  </tbody>
</table>

Which looks off, like here:

my table example

Solution

  • Use the following style

    td {
  white-space: nowrap;
}


    td {
  white-space: nowrap;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.2.0/css/fluent-kit.min.css" rel="stylesheet" />

<table class="table table-responsive">
  <caption>Last week statistics</caption>
  <thead>
    <tr>
      <th>Make</th>
      <th>Model</th>
      <th>Origin</th>
      <th>Producent</th>
      <th>Doors</th>
      <th>Engine</th>
      <th>Petrol</th>
      <th>First release</th>
      <th>Price 2016</th>
      <th>Price 2017</th>
      <th>Maximum speed</th>
      <th>Gears</th>
      <th>Manufactured</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Audi</td>
      <td>R8</td>
      <td>Germany</td>
      <td>Audi</td>
      <td>3</td>
      <td>R8 V8 4.2 FSI quattro</td>
      <td>Gasoline</td>
      <td>2006</td>
      <td>$1.000.000</td>
      <td>$950.000</td>
      <td>375 km /h</td>
      <td>7</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Audi</td>
      <td>R8</td>
      <td>Germany</td>
      <td>Audi</td>
      <td>3</td>
      <td>R8 V8 4.2 FSI quattro</td>
      <td>Gasoline</td>
      <td>2006</td>
      <td>$1.000.000</td>
      <td>$950.000</td>
      <td>375 km /h</td>
      <td>7</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Audi</td>
      <td>R8</td>
      <td>Germany</td>
      <td>Audi</td>
      <td>3</td>
      <td>R8 V8 4.2 FSI quattro</td>
      <td>Gasoline</td>
      <td>2006</td>
      <td>$1.000.000</td>
      <td>$950.000</td>
      <td>375 km /h</td>
      <td>7</td>
      <td>Germany</td>
    </tr>
  </tbody>
</table>

    Also you can add class="text-nowrap" utility class to the td's that you specifically don't want to wrap.