Bootstrap 3表固定宽度

网络图例

我想问一下,为什么内容的宽度太大,为什么不固定宽度th,而不换行呢?现在,使th的宽度扩大。如何解决?我的第一列宽度:col-lg-2。

在此处输入链接说明

来自邻居

如果您在标题中使用列,则表格的其余部分将遵循该模式,直到大小为止。

<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>[email protected].</td>
    </tr>
    <tr>
      <td>1.asdsadasdadasdad</td>
      <td>John.</td>
      <td>Carter.</td>
      <td>[email protected].</td>
    </tr>
  </tbody>
</table>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootstrap Navbar(固定)动态宽度

来自分类Dev

Bootstrap中的固定宽度表列

来自分类Dev

Bootstrap 4响应表:如何固定列宽并使表始终占据父元素100%的宽度?

来自分类Dev

Bootstrap 3:在3列布局中水平居中放置列内容,宽度不固定

来自分类Dev

Bootstrap形式-水平溢出固定宽度的容器

来自分类Dev

Bootstrap 输入组,固定宽度按钮

来自分类Dev

在Bootstrap 3中将列数据宽度限制为固定大小

来自分类Dev

在Bootstrap中组合固定宽度和可变宽度的列

来自分类Dev

在Bootstrap中组合固定宽度和可变宽度的列

来自分类Dev

屏幕的Bootstrap 3模态宽度

来自分类Dev

屏幕的Bootstrap 3模态宽度

来自分类Dev

Bootstrap模态宽度中的数据表

来自分类Dev

Bootstrap-为什么固定位置的div的宽度减小?

来自分类Dev

如何通过BootStrap创建1400px固定宽度的网站?

来自分类Dev

固定位置子项时从Bootstrap容器继承宽度

来自分类Dev

使Twitter Bootstrap固定宽度小于1024px

来自分类Dev

具有固定第一列的bootstrap 3响应表

来自分类Dev

Bootstrap 3表,使用滚动条以px为单位设置固定的列宽

来自分类Dev

具有固定第一列的bootstrap 3响应表

来自分类Dev

Bootstrap 3-940px宽度的网格?

来自分类Dev

Bootstrap 3标签-扩展标签的宽度100%

来自分类Dev

Bootstrap 3 btn-group宽度

来自分类Dev

Bootstrap 3 daterangepicker不采用100%宽度

来自分类Dev

Bootstrap 3 .control-label宽度?

来自分类Dev

Bootstrap 3标签-扩展标签的宽度100%

来自分类Dev

Bootstrap3:左侧固定导航

来自分类Dev

使用Bootstrap 3使页脚固定在底部

来自分类Dev

Bootstrap 3:固定柱和响应柱

来自分类Dev

Bootstrap 3:居中并固定glyphicon标签

Related 相关文章

热门标签

归档