对小屏幕强制执行相等的行高

Question

我正在使用Fluent Kit框架中的JSFiddle，并且正如您在小屏幕上看到的那样，单元格中的文本转到了新行，而不是扩展到所有可用的宽度，这是无限的，因为它位于{ {1}}包装器。

在下面的代码中，第五个“引擎”列是此行为的示例：

.table-responsive

看起来像这样的地方

Answer 1

使用以下样式

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>

您还可以将class="text-nowrap"实用工具类添加到您不想包装的td中。