Bootstrap 3：如何在容器中放入响应表？

Question

我试图在响应式视图上管理我的表以适应容器div。我希望元素叠加而不是在容器后溢出。

我尝试了这段代码，但它不起作用：

table {
  table-layout:fixed;
  width:100%;
}

My Fiddle example

Answer 1

您在text-nowrap元素上使用tbody。这增加了这个CSS：

white-space: nowrap;

这意味着单元格的内容不会换行，这反过来又会修复最小宽度。这意味着他们无法做出回应。删除它，你的桌子就适合了。

Answer 2

当您使用bootstrap3时，您在错误的位置使用了 table-responsive 类。只需将 .table 打包到div table-responsive 中，然后将 min-width 应用于您的选择元素为了响应目的。

<强> Reference Documentation

＆＃13;

＆＃13;

body {
  background: #D3D3D3;
  margin: 20px;
}

.container {
  background: white;
}

select {
  min-width: 150px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-12" role="main">
      <h2>Test Table</h2>
      <div class="table-responsive">
        <table class="table table-curved">
          <tbody class="text-nowrap">
            <tr>
              <th class="info bold-italic col-md-3" scope="row">This is long title from my table 1</th>
              <td>
                <select class="form-control selectwidthauto input-sm text-center">
                  <option value="" selected disabled hidden>Choisissez une option</option>
                  <option value="oui">Oui</option>
                  <option value="non">Non</option>
                </select>
              </td>
              <th class="info bold-italic col-md-3" scope="row">This is long title from my table 2</th>
              <td>
                <select class="form-control selectwidthauto input-sm text-center">
                  <option value="" selected disabled hidden>Choisissez une option</option>
                  <option value="oui">Oui</option>
                  <option value="non">Non</option>
                </select>
              </td>
            </tr>
            <tr>
              <th class="info bold-italic col-md-3" scope="row">This is long title from my table 3</th>
              <td>
                <select class="form-control selectwidthauto input-sm text-center">
                   <option value="" selected disabled hidden>Choisissez une option</option>
                   <option value="oui">Oui</option>
                   <option value="non">Non</option>
                 </select>
              </td>
              <th class="info bold-italic col-md-3" scope="row">This is long title from my table 4</th>
              <td>
                <select class="form-control selectwidthauto input-sm text-center">
                  <option value="" selected disabled hidden>Choisissez une option</option>
                  <option value="oui">Oui</option>
                  <option value="non">Non</option>
                </select>
              </td>
            </tr>
            <tr>
              <th class="info bold-italic col-md-3" scope="row">This is long title from my table 5</th>
              <td>
                <select class="form-control selectwidthauto input-sm text-center">
                  <option value="" selected disabled hidden>Choisissez une option</option>
                  <option value="oui">Oui</option>
                  <option value="non">Non</option>
                </select>
              </td>
              <th class="info bold-italic col-md-3" scope="row">This is long title from my table 6</th>
              <td>
                <select class="form-control selectwidthauto input-sm text-center">
                  <option value="" selected disabled hidden>Choisissez une option</option>
                  <option value="oui">Oui</option>
                  <option value="non">Non</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;