请选择 进入手机版 | 继续访问电脑版

我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

bootstrap Table表格宽度不生效的现象和处理方法

小编尝试进行网页编程学习时,使用了Bootstrap插件,通过内联样式给表格的th设置了宽度,但是预览网页效果时,没有生效!在此分享处理经验。



现象如下图所示,html代码中通过内联样式修改了th的宽度,但是表格table预览时列宽明显太窄,导致文字显示异常。

bootstrap Table表格宽度不生效的现象和处理方法

bootstrap Table表格宽度不生效的现象和处理方法


代码如下图所示,列宽设置的200px,但实际显示只有不到40px.
  1. <thead>
  2.                                                         <tr>
  3.                                                                 <th style="width:200px;">平台</th>
  4.                                                                 <th>标题</th>
  5.                                                                 <th>返现链接(复制打开该链接下单)</th>
  6.                                                                 <th>返现金额</th>
  7.                                                                 <th>备注</th>
  8.                                                         </tr>
  9.                                                 </thead>
复制代码


在 Bootstrap 或者一些特殊情况下,会出现设置宽度不生效的现象。

首先,表格的展示属性应为 display: table 如果是 block 会出现宽度不生效的情况。

第二为table添加table-layout:fixed属性,小编遇到的问题就是添加这个属性解决的。


table-layout 设置表格布局算法,有如下三个属性:

automatic 默认,列宽度由单元格内容设定。

fixed 列宽由表格宽度和列宽度设定。

inherit 规定应该从父元素继承 table-layout 属性的值。

也可以及一行 word-wrap: break-word; 效果会更好。


以上,就是使用bootstrap时表格列宽失效的解决方法


点击阅读更多内容!
如果您觉得文章内容帮助到了您,不妨点点感兴趣的广告。感谢您的支持!

微信扫一扫打赏

上一篇: 异常的网页布局li元素在IE浏览器中显示异常

下一篇: 无下一篇内容

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-4-23 12:38 , Processed in 0.076667 second(s), 29 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表