Make TD fit content dynamically using Bootstrap

Question

Here is my drama:

I have a bootstrap panel which takes 1/3 of the page (col-4-md) and inside I have a table with only tho TDs on each row (TR).

Since

1.) I want the first TD to be extended to the max width of the longest text in the first column,

2.) I would like the second column to add text-overflow:ellipsis if the containing text is very long.

One way to do the second is to add table-layout:fixed but then I couldn't find a way to to the first.

Any suggestions?

Here is a CodePen example:

codepen.io/brankoleone/pen/EyaVwY

Answer 1

I played a little bit and found one solution (tested on chrome):

1. remove table-layout: fixed; from .table-crm {
2. add max-width: 0; to td + td {
3. add width: 1%; and white-space: nowrap; to td:first-child {

EDIT: Heres a jsfiddle: https://jsfiddle.net/5t08tota/