Bootstrap 3 table 第固定宽度

Question

请问，为什么不固定宽度th，内容太大时不换行？现在扩大宽度。怎么修？我的第一列宽度：col-lg-2.

Answer 1

您可以使用 <th width="7%"> 申请，例如：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th width="7%">very very very very very long texttextextextextetxetxtetxtxtxtxtxtxtxt</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>
  </tbody>
</table>

DEMO

http://jsfiddle.net/8mtu3oLr/

Answer 2

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

<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>

Bootstrap 3 table 第固定宽度

Bootstrap 3 table th fix width

html

css

html-table

twitter-bootstrap-3