0

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Leo
  • 5,363
  • 5
  • 27
  • 30

1 Answers1

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/

Simas Skilinskas
  • 141
  • 1
  • 1
  • 5
  • Perfect, it obviously works like I want to, but I can't figure out why `max-width:0;` makes it possible – Leo Jun 01 '16 at 11:19
  • I don't really know too :D just googled for "text overflow table", didn't saw any way to do it using "table-layout: fixed;" and found it here: http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell – Simas Skilinskas Jun 01 '16 at 12:56