Сделайте TD подходящим содержанием динамически, используя Bootstrap

Question

все! Вот моя драма:

У меня есть ботстрап-панель, которая занимает 1/3 страницы (col-4-md), и внутри у меня есть таблица с только ТД TD в каждой строке (TR).

С

1.) Я хочу первый ТД быть продлен до максимальной ширины самого длинного текста в первом столбце,

2.) Я хотел бы вторую колонку, чтобы добавить text- overflow: многоточие, если содержащий текст очень длинный.

Один из способов сделать второй - добавить таблицу-макет: исправлено, но тогда я не смогу найти путь к первому.

Любые предложения?

Вот пример CodePen:

codepen.io/brankoleone/pen/EyaVwY

Answer 1

Я играл немного и нашел одно решение (проверено на хром):

1. удалить от .table-crm {
2. добавить max-width: 0; к td + td {
3. добавить width: 1%; и white-space: nowrap; к td:first-child {

EDIT: Херес jsfiddle: https://jsfiddle.net/5t08tota/