bootstrap table columns too wide, when I set no-wrap

Question

I am trying to make a table behave "properly" (and by properly I mean)

• use the width percentages I have given
• don't wrap, instead use ellipsis any overflow

Bootstrap says I may have width that I specify as max-width percentages inline in the th tag style markup

 table.table.table-striped.table-bordered th,
 table.table.table-striped.table-bordered th.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

https://jsfiddle.net/DTcHh/87084/

OR the no-wrap height that I specify ... but not both

  /* CSS used here will be applied after bootstrap.css */

table.table.table-striped.table-bordered td,
table.table.table-striped.table-bordered td.text {
  /*max-width: 177px;*/
}

table.table.table-striped.table-bordered td,
table.table.table-striped.table-bordered td.text, 
table.table.table-striped.table-bordered th,
table.table.table-striped.table-bordered th.text, 
table.table.table-striped.table-bordered span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

https://jsfiddle.net/n85026uy/

But how do I make it so that the page doesn't wrap words (one line only) but at the same time obeys the inline % I gave it.

Not only does the ellipsis not run and a enormous ridiculour horizontal scroll appear off page (at the bottom) but the bottom navigation tfooter control is pushed off the screen to the right.

I would like to have:

• inline percentages used
• if it's too narrow use ellipsis and do not wrap.

shouldn't be this hard

Answer 1

use these CSS styles:

for your table

        table-layout: fixed;

for th, td

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

and use inline (not CSS rules, it's important) width (not max-width) for your th elements, like this:

<th style="width: 11%" ... >

you are free to use px instead of % or other units as well

extra scrolling you may have because of use of '.row' class which adds some negative margin. You must make sure to compensate it by using proper wrapper/container class/styles