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

Question

我正在使用 Fluent Kit 框架中的这个 Bootstrap tables，正如您在小屏幕上看到的那样，单元格中的文本会转到新行，而不是扩展到所有可用宽度，因为它在内部是无限的.table-responsive 包装器。

在下面的代码中，第五 "Engine" 列是这种行为的一个例子：

<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>.000.000</td>
    <td>0.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>.000.000</td>
    <td>0.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>.000.000</td>
    <td>0.000</td>
    <td>375 km /h</td>
    <td>7</td>
    <td>Germany</td>
  </tr>
  </tbody>
</table>

看起来不对劲，就像这里：

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>.000.000</td>
      <td>0.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>.000.000</td>
      <td>0.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>.000.000</td>
      <td>0.000</td>
      <td>375 km /h</td>
      <td>7</td>
      <td>Germany</td>
    </tr>
  </tbody>
</table>

您还可以将 class="text-nowrap" 实用程序 class 添加到您特别不想包装的 td。

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

Enforce equal rows height for small screen

css

html-table

bootstrap-4

fluent-kit