移動視圖中的Bootstrap v4.0.0-alpha.3表重排問題

Question

我正在移動視圖中嘗試以下代碼，但無法解決移動視圖中的表重排問題。 任何建議都會很貼切

在這里查看圖片

在CODEPEN上查看代碼

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <table class="table table-reflow">
        <thead>
          <tr>
            <th>Id</th>
            <th>Employee Name</th>
            <th>Salary</th>
            <th>Bonus</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr scope="row">
            <td>665</td>
            <td>Amit Shah</td>
            <td>10000</td>
            <td>1000</td>
            <td>11000</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

這似乎是BS4 alpha中的一個已知問題： https : //github.com/twbs/bootstrap/issues/20510

一種解決方法是為表格設置固定寬度，以防止表格包裝。

http://www.codeply.com/go/WX8ByNRqMy

Answer 2

我為您提供使用媒體查詢的解決方案。 希望對您有所幫助。 檢查CODEPLY鏈接

CSS：

@media (max-width: 544px) {
  .table-reflow thead,
  .table-reflow thead tr,
  .table-reflow tbody tr {
    width: 100%;
  }
}