Question

我有一个Bootstrap 4表，该表显示货币价值信息，但是我在响应模式下有显示问题，然后我详细说明我的问题：

我有以下HTML代码：

<div class="table-responsive">
 <table class="table table-hover">
   <thead>
     <tr>
       <th scope="col">#</th>
       <th scope="col">First</th>
       <th scope="col">Last</th>
       <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="row">1</th>
        <td>$ 1,543,3345,432</td>
        <td>$ 1,456,334,4545</td>
        <td>$ 1,000,0202</td>
      </tr>
    </tbody>
   </table>
</div>

在PC上可以完美显示：

但是在响应模式下出现问题：

我想要的是在响应模式下，它看起来像个人电脑。我尝试了几种更改CSS的方法来实现这一点，但是我做不到。

非常感谢您！

Answer 1

您可以给表赋予宽度并使其内联，另一种方法是将其应用于空白：nowrap;的table tr td

.tablewd{
   min-width:450px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="table-responsive">
 <table class="table table-hover tablewd">
   <thead>
     <tr>
       <th scope="col">#</th>
       <th scope="col">First</th>
       <th scope="col">Last</th>
       <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <th scope="row">1</th>
        <td>$ 1,543,3345,432</td>
        <td>$ 1,456,334,4545</td>
        <td>$ 1,000,0202</td>
      </tr>
    </tbody>
   </table>
</div>

Answer 2

您应该添加更多CSS：

.table td {  white-space: nowrap; }

Answer 3

为表使用Bootstrap-4的 text-nowrap 类，以避免文本中断。

/* Source: Bootstrap-4 source code*/
.text-nowrap {
  white-space: nowrap !important;
}

https://codepen.io/anon/pen/zLpzwe

在引导表中内联显示内容

3 个答案: