Bootstrap 3表格固定宽度

Question

我想问一下，为什么不修复宽度，当内容太大时不要换新线？现在使扩展宽度。如何解决？我的第一列宽度：col-lg-2。

enter link description here

Answer 1

如果您在头部使用列，则表格的其余部分将遵循该模式的大小。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>With Columns</h1>
<table class="table table-bordered">
  <thead>
    <tr class="danger">
      <th class="col-lg-2">col-lg-2 - Row Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. industry. Lorem Ipsum has been the industry's.</th>
      <th class="col-lg-3">col-lg-3 - Row</th>
      <th class="col-lg-4">col-lg-4 - Row</th>
      <th class="col-lg-3">col-lg-3 - Row</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. he printing and typesetting industry. Lorem Ipsum has been t</td>
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</td>
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</td>
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</td>
    </tr>
    <tr>
      <td>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</td>
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</td>
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</td>
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply
        dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</td>
    </tr>
  </tbody>
</table>
<hr>
  <h1>Without Columns</h1>
<table class="table table-bordered">
  <thead>
    <tr class="info">
      <th>Row fasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasd</th>
      <th>Row</th>
      <th>Row</th>
      <th>Row</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.asdsadasdadasdad</td>
      <td>John.</td>
      <td>Carter.</td>
      <td>j@carter.com.</td>
    </tr>
    <tr>
      <td>1.asdsadasdadasdad</td>
      <td>John.</td>
      <td>Carter.</td>
      <td>j@carter.com.</td>
    </tr>
  </tbody>
</table>