Search code examples
htmlcssbootstrap-table

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

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;
}

enter image description herehttps://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%;
}

enter image description here 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

Solution

  • 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

    tested in Chrome

    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