html - 使用 Bootstrap 使 TD 动态适应内容

Question

这是我的戏剧:

我有一个 Bootstrap 面板，它占据了页面的 1/3 (col-4-md)，在里面我有一个表格，每行 (TR) 上只有 TD。

自

1.) 我希望将第一个 TD 扩展到第一列中最长文本的最大宽度，

2.) 如果包含的文本很长，我希望第二列添加 text-overflow:ellipsis。

第二种方法是添加 table-layout:fixed 但我找不到第一种方法。

有什么建议吗？

这是一个 CodePen 示例:

codepen.io/brankoleone/pen/EyaVwY

Answer 1

我玩了一下，找到了一个解决方案(在 chrome 上测试过):

1. 从 .table-crm {
中删除 table-layout: fixed;
2. 将 max-width: 0; 添加到 td + td {
3. 将 width: 1%; 和 white-space: nowrap; 添加到 td:first-child {

编辑:这是一个 jsfiddle: https://jsfiddle.net/5t08tota/