html - 当我设置 no-wrap 时，bootstrap 表列太宽

Question

我正在尝试让表格“正常”运行(我的意思是正常)

• 使用我给定的宽度百分比
• 不要换行，任何溢出都使用省略号

Bootstrap 说我可能有 width 我在 th 标签样式标记中内联指定为最大宽度百分比

 table.table.table-striped.table-bordered th,
 table.table.table-striped.table-bordered th.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

https://jsfiddle.net/DTcHh/87084/

或 我指定的无环绕高度 ...但不是两者都是

  /* CSS used here will be applied after bootstrap.css */

table.table.table-striped.table-bordered td,
table.table.table-striped.table-bordered td.text {
  /*max-width: 177px;*/
}

table.table.table-striped.table-bordered td,
table.table.table-striped.table-bordered td.text, 
table.table.table-striped.table-bordered th,
table.table.table-striped.table-bordered th.text, 
table.table.table-striped.table-bordered span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

https://jsfiddle.net/n85026uy/

但是我该怎么做才能使页面不换行(仅一行)但同时遵守我给它的内联 %。

不仅省略号没有运行，而且一个巨大的可笑水平滚动条出现在页面之外(在底部)，而且底部导航 tfooter 控件被推到屏幕右侧。

我想要:

• 使用的内联百分比
• 如果太窄，请使用省略号并且不要换行。

不应该这么难

Answer 1

使用这些 CSS 样式:

为你的表

        table-layout: fixed;

对于 th, td

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

并为您的第 th 元素使用 inline(不是 CSS 规则，这很重要)width(不是 max-width)，如下所示:

<th style="width: 11%" ... >

您可以自由使用 px 而不是 % 或其他单位

额外的滚动可能是因为使用了 '.row' 类，它增加了一些负边距。您必须确保通过使用适当的包装器/容器类/样式来补偿它