css - 修复 Bootstrap 表列宽

标签 css twitter-bootstrap bootstrap-table

我想修复 Bootstrap 表中特定列的宽度。我已经尝试了在文档和论坛上可以找到的所有内容:

添加data-width属性为<th>标签依据Bootstrap Table documentation :

<th data-width= 20 data-field="0" data-sortable="true" data-align="left" data-valign="middle">Car Model</th>

添加class="col-xs-4"<th>标签:

<th class="col-xs-4" data-field="0" data-sortable="true" data-align="left" data-valign="middle">Car Model</th>

最后,更改列的 CSS 属性:

.table tr td:nth-child(3) {width:50%;}

不幸的是,上述方法均无效。我想知道是否我写了错误的代码或者我的某些代码相互冲突。我非常感谢您的帮助!

这是我的表格:

http://jsfiddle.net/mademoiselletse/bypbqboe/56/

最佳答案

表格单元格按照建议采用您的尺寸,并在可以的情况下尝试使用它们,但如果内容不允许,那么您的尺寸将不会得到尊重......除非您使用以下属性在你的 table 上:

表格布局:固定

我可能有点过于简单化了,请阅读更多有关其工作原理的确切原因(假设您的第一行包含少量文本 - 通常会这样做,因为它们通常是列标题),在这里:

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

关于css - 修复 Bootstrap 表列宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30444802/

相关文章:

html - 试图将扩展导航栏从右侧移动到左侧

jquery - 更改 Bootstrap 表单元格中复选框的大小

jquery - 滚动到某个点后删除粘性标题

jquery - .slideToggle 和位置 :fixed in Chrome

css - 我如何重构CSS?

javascript - bootstrap-table:如何将一个表嵌套到另一个表中?

javascript - 如何在引导表中对文件大小进行排序?

asp.net - 水平和垂直边框的不同图像 - CSS

c# - 防止在 ASP.NET 中回发时关闭 Bootstrap 模式

javascript - CakePHP 模式在卸载后不显示 'DebugKit.Toolbar'