如何动态调整表格列的大小以适合内容，左对齐并保持最大宽度？

问题描述

我发现了很多示例，这些示例与我要寻找的示例非常接近，但是我需要对表的设计进行更多控制。另外，我不希望文本自动换行，也不希望显示省略号，并且希望将鼠标悬停在内容上时可以看到内容。

这是一个 VueJS项目，我曾经（或者取决于我能否使其工作）使用Element UI

详细内容。我希望我的桌子看起来像这样：

Header A    Header B                     Header C
------------------------------------------------------------------------------- 100%
Apples      Bananas la la la la la la... A Box of crackers and some super ri...
Oranges     Mr. Bean Is Cool             More chocolate milk

该示例为text-overflow: ellipsis

或者像这样：

Header A    Header B    Header C
------------------------------------------------------------------------------- 100%
Apples      Bananas     A Box of crackers and some super rich chocolate milk
Oranges     Mr. Bean    More chocolate milk

或者像这样：

Header A    Header B                      Header C
------------------------------------------------------------------------------- 100%
Apples      Bananas are not my favorite   A Box of crackers and some super r...
Oranges     Mr. Bean                      More chocolate milk

或者像这样：

Header A    Header B    Header C
------------------------------------------------------------------------------- 100%
Apples      Bananas     Oranges
Running     Out         Of ideas to put in here

重点是要使字段保持对齐，并且不会以响应方式分散。我已经尝试过各种布局，例如table-layout: fixed与和width: auto，但老实说，我已经尝试了很多变化，因此不确定共享哪个。

更麻烦的是，该表是根据json动态生成的，我不知道我将拥有哪些列或它们的内容。因此，这是我已采取的一些伪步骤：

// figure out how many actual columns are visible
let visibleColumns = _.filter(this.$refs.table.columns,c => {
  return c.label != null && c.label.length;
}).length;

// I'm doing this so I can just guess a good max width on a column
// Switch trimmed for brevity
let maxWidth;
switch (visibleColumns) {
  case 1:
    maxWidth = 1000;
    break;
  case 2:
    maxWidth = 700;
    break;      
  default:
    maxWidth = 200;
    break;
  }

// Loop over my dynamic columns and find the longest value from the data
_.each(cols,c => {
  const comparer = Math.max(...this.data.map(d => String(d[c.field]).length));
});

// I then print the alpha equivalent to the length of the longest field into a hidden
// div and get the width and compare it with the max width based on columns

// i.e. if maxWidth is less than the length of the column then use that,else the div width

元素UI具有minWidth和width属性，没有最大宽度。而且它们具有良好的自动工具提示功能。但是，事实证明，尝试控制表的难度比其价值要难得多，因此，我将构建自己的表组件。我发现其他人已经通过Element UI的表走了这条路，并遇到了一些麻烦。

总结起来，我需要智能地平衡各列并处理文本溢出，并在项目被部分隐藏时显示工具提示。

这是一个小提琴，显示了我想扩展最后一列时遇到的第一个问题。

https://jsfiddle.net/xtrvygfq/

解决方法

CSS可以解决您的问题。

.cell-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
}

您的HTML

<td v-for="h in colDefs">
    <div class="cell-overflow">{{d[h.field]}}</div>
</td>

https://jsfiddle.net/k2fh8b53/2/

bootstrap-4 css-tables javascript