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

Photometer

Best to use Media match method and in it you will have to recalculate the total width and assign all the th's equally or as per the priority and all this should work with resize as well. as far as the ellipse is concerned for it to work you will have to have specific width to the element. Percentages are not good friend here. pixels will be your best mate in this context. Happy coding. – Grandnephew

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

Yulan

this is the corrent answer, column 1 (a fixed with button) I had to hard code style="width: 80px important!;" onto it but other than that this worked. the other answers were all tried, but only this one worked without a scroll: auto; bar and without ignoring the % relative values – Photometer

Answer 2

Hey we can just override the TD with css

td {
    max-width: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

you can specify any width , sample i updated in https://jsfiddle.net/n85026uy/11/

Matins

Answer 3

Perhaps you can try vw instead

table tr td, table tr th {
    max-width: 10vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
table{
    width:100%;
}

Link to fiddle -> https://jsfiddle.net/DTcHh/95902/

Downs

Answer 4

Giving table layout fixed should solved the problem, it takes the width and also the ellipses. If you don't set the inline width, the columns should have equal width.

.table {
    table-layout: fixed;
}

Or wrap the text of <td> in a <div>:

<td><div>text</div></td>

td > div {
   width: 50px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

Updated your fiddle

Coreligionist

thanks this partially works but it ignores my percentage widths.. there are two columns that need to be readable (basically) some columns are 21% some are 4% with table-layout: fixed; they are all equal – Photometer

Instead of max-width, you can just use width CSS. It should work then. And then change it the way you would want in responsive. – Coreligionist

I can't use width css, the markup widths are a user configurable database setting and (so) are delivered in the markup. They are stored in pixels but are drawn relative to having the full width (hence %) – Photometer

@MrHeelis, I can't get what you mean by can't use width css, let's say for those <th class="footable-visible footable-first-column footable-sortable" style="max-width:x%; ">, simply change to width:x% solved the problem, while you can still let user control it, why not? – Camara

Answer 5

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

table {
  max-width: 98vw;
  margin: 0 1vw;
}

table.table.table-striped.table-bordered td,
table.table.table-striped.table-bordered th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10vw;
  margin: 0;
  padding: 1vw;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="page-title-box">
          <h4 class="page-title">Site</h4>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="row" id="loading" style="display: none;">
      <div class="col-12">
        <div class="card-box table-responsive">
          <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
              40%
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="card-box table-responsive">
          <div>
            <table class="table table-striped table-bordered toggle-circle m-b-0 default footable-loaded footable">
              <thead>
                <tr>
                  <th class="footable-visible footable-first-column footable-sortable"></th>
                  <th class="footable-visible footable-first-column footable-sortable" style="max-width:11%; "><a href="list.php?table=site&amp;a=0&amp;order_by=customer_id">Customer</a> <i class="fa fa-sort"></i></th>
                  <th class="footable-visible footable-first-column footable-sortable" style="max-width:11%; "><a href="list.php?table=site&amp;a=0&amp;order_by=name">Name</a> <i class="fa fa-sort"></i></th>
                  <th class="footable-visible footable-first-column footable-sortable" style="max-width:23%; "><a href="list.php?table=site&amp;a=0&amp;order_by=details">Details</a> <i class="fa fa-sort"></i></th>
                  <th class="footable-visible footable-first-column footable-sortable" style="max-width:11%; "><a href="list.php?table=site&amp;a=0&amp;order_by=address">Address</a> <i class="fa fa-sort"></i></th>
                  <th class="footable-visible footable-first-column footable-sortable" style="max-width:4%; "><a href="list.php?table=site&amp;a=0&amp;order_by=postcode">Postcode</a> <i class="fa fa-sort"></i></th>
                  <th class="footable-visible footable-first-column footable-sortable" style="max-width:11%; "><a href="list.php?table=site&amp;a=0&amp;order_by=contact_name">Contact Name</a> <i class="fa fa-sort"></i></th>
                  <th class="footable-visible footable-first-column footable-sortable" style="max-width:11%; "><a href="list.php?table=site&amp;a=0&amp;order_by=contact_telephone">Contact Telephone</a> <i class="fa fa-sort"></i></th>
                  <th class="footable-visible footable-first-column footable-sortable" style="max-width:11%; "><a href="list.php?table=site&amp;a=0&amp;order_by=contact_roll">Contact Roll</a> <i class="fa fa-sort"></i></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=6&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Nullam Feugiat Placerat Limited</td>
                  <td>Phasellus Associates</td>
                  <td>semper. Nam tempor diam dictum sapien. Aenean massa. Integer vitae</td>
                  <td>Ap #516-876 Tristique Ave</td>
                  <td>TS1 3JR</td>
                  <td>Cassidy A. Jimenez</td>
                  <td>0998 889 9468</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=7&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Nulla Tincidunt Foundation</td>
                  <td>Tellus Incorporated</td>
                  <td>vel sapien imperdiet ornare. In faucibus. Morbi vehicula. Pellentesque tincidunt</td>
                  <td>667-8811 Auctor Av.</td>
                  <td>TS9 5JZ </td>
                  <td>Mallory Q. Hicks</td>
                  <td>0800 738783</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=86&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Lorem Ipsum Dolor Company</td>
                  <td>Elit Pretium Et PC</td>
                  <td>tempus, lorem fringilla ornare placerat, orci lacus vestibulum lorem, sit</td>
                  <td>P.O. Box 474, 4960 Molestie Avenue</td>
                  <td>TS9 5DG</td>
                  <td>Wynter D. Mcknight</td>
                  <td>056 8268 0449</td>
                  <td></td>
                </tr>                                    
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=508&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Molestie Tellus Aenean Institute</td>
                  <td>Semper LLP</td>
                  <td>sapien, cursus in, hendrerit consectetuer, cursus et, magna. Praesent interdum</td>
                  <td>4648 Primis St.</td>
                  <td>TS23 4DD</td>
                  <td>Tatum L. Alvarez</td>
                  <td>056 4603 1242</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=650&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Nunc Interdum Feugiat Consulting</td>
                  <td>Suspendisse sagittis. Nullam vitae diam. Proin dolor. Nulla semper tellus</td>
                  <td>Ap #982-6492 Enim Avenue</td>
                  <td>TS6 7PW</td>
                  <td>Kirby U. Paul</td>
                  <td>[phone]</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=653&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Vitae Nibh Donec Corporation</td>
                  <td>dis parturient montes, nascetur ridiculus mus. Proin vel arcu eu</td>
                  <td>428-7083 Sociis Avenue</td>
                  <td>TS6 9EB</td>
                  <td>Declan O. Cannon</td>
                  <td>0318 951 3442</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=658&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Etiam Gravida Molestie LLC</td>
                  <td>nec, euismod in, dolor. Fusce feugiat. Lorem ipsum dolor sit</td>
                  <td>904-2420 Natoque Avenue</td>
                  <td>TS6 0TJ</td>
                  <td>Quamar C. Harrington</td>
                  <td>0889 445 3432</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=668&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Enim Mauris Quis Company</td>
                  <td>Donec porttitor tellus non magna. Nam ligula elit, pretium et,</td>
                  <td>P.O. Box 172, 2024 Semper Road</td>
                  <td>TS10 5JU</td>
                  <td>Chancellor T. Berry</td>
                  <td>[phone]</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=669&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Aliquet Molestie Institute</td>
                  <td>eu, eleifend nec, malesuada ut, sem. Nulla interdum. Curabitur dictum.</td>
                  <td>932-3264 Quisque Road</td>
                  <td>TS6 9EE</td>
                  <td>Geraldine F. Chan</td>
                  <td>0807 831 7416</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=678&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Tempor Diam Dictum Consulting</td>
                  <td>eget metus eu erat semper rutrum. Fusce dolor quam, elementum</td>
                  <td>3976 Faucibus St.</td>
                  <td>TS6 0TH</td>
                  <td>Jillian N. Gordon</td>
                  <td>(016977) 9802</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=684&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Netus Incorporated</td>
                  <td>a neque. Nullam ut nisi a odio semper cursus. Integer</td>
                  <td>Ap #170-2245 Nunc. Road</td>
                  <td>TS6 9ES</td>
                  <td>Jason F. Gomez</td>
                  <td>0301 972 0844</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=686&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Eu Odio Industries</td>
                  <td>Duis dignissim tempor arcu. Vestibulum ut eros non enim commodo</td>
                  <td>1855 Vel Ave</td>
                  <td>TS6 9ED</td>
                  <td>Anastasia U. Stout</td>
                  <td>(01504) 52551</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=687&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>Integer Sem Elit LLP</td>
                  <td>a, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                  <td>Ap #730-443 Est Av.</td>
                  <td>TS10 5QY</td>
                  <td>Myles M. Clemons</td>
                  <td>(013872) 81025</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=701&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Porttitor PC</td>
                  <td>Class Aptent Ltd</td>
                  <td>Etiam ligula tortor, dictum eu, placerat eget, venenatis a, magna.</td>
                  <td>P.O. Box 357, 1354 Aliquam Ave</td>
                  <td>TS24 0TB</td>
                  <td>Shafira B. Wong</td>
                  <td>0821 631 3118</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=739&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>A Facilisis Non PC</td>
                  <td>Consectetuer Cursus Et Incorporated</td>
                  <td>metus. In lorem. Donec elementum, lorem ut aliquam iaculis, lacus</td>
                  <td>Ap #421-6973 Mauris. St.</td>
                  <td>TS2 1JP</td>
                  <td>Carla P. Webb</td>
                  <td>07624 258217</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=758&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>A Facilisis Non PC</td>
                  <td>Neque LLP</td>
                  <td>mauris a nunc. In at pede. Cras vulputate velit eu</td>
                  <td>Ap #902-4935 Eget, St.</td>
                  <td>TS1 2YQ</td>
                  <td>Constance O. Frost</td>
                  <td>[phone]</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=820&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Nulla Facilisis Consulting</td>
                  <td>Senectus Et Netus Consulting</td>
                  <td>ante lectus convallis est, vitae sodales nisi magna sed dui.</td>
                  <td>Ap #364-1847 Faucibus Rd.</td>
                  <td>TS10 4JH</td>
                  <td>Armand B. May</td>
                  <td>0977 217 1243</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=932&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Faucibus Orci Incorporated</td>
                  <td>Fringilla Purus PC</td>
                  <td>habitant morbi tristique senectus et netus et malesuada fames ac</td>
                  <td>689-6734 Faucibus Road</td>
                  <td>TS20 1LG</td>
                  <td>Deanna L. Strong</td>
                  <td>0956 446 0611</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=937&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Ornare Corp.</td>
                  <td>Ornare Tortor At Corp.</td>
                  <td>Mauris blandit enim consequat purus. Maecenas libero est, congue a,</td>
                  <td>P.O. Box 457, 5195 Primis Av.</td>
                  <td>TS15 9TF</td>
                  <td>Illiana W. Burnett</td>
                  <td>055 9383 2068</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=947&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Ornare Corp.</td>
                  <td>Orci Luctus Limited</td>
                  <td>lobortis. Class aptent taciti sociosqu ad litora torquent per conubia</td>
                  <td>P.O. Box 304, 4203 Aliquam Rd.</td>
                  <td>TS22 5EG</td>
                  <td>Roary D. Farrell</td>
                  <td>0890 901 9474</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=967&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Ornare Corp.</td>
                  <td>Nunc Quis Foundation</td>
                  <td>Suspendisse ac metus vitae velit egestas lacinia. Sed congue, elit</td>
                  <td>719-8352 Ut Av.</td>
                  <td>TS19 9BX</td>
                  <td>Tanner P. Guzman</td>
                  <td>[phone]</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1045&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Rutrum Fusce LLP</td>
                  <td>Amet Consectetuer PC</td>
                  <td>Phasellus vitae mauris sit amet lorem semper auctor. Mauris vel</td>
                  <td>933-3450 Nec, Av.</td>
                  <td>TS6 0SZ</td>
                  <td>Shaine L. Adkins</td>
                  <td>056 3000 7083</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1046&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Rutrum Fusce LLP</td>
                  <td>Libero Mauris Aliquam Institute</td>
                  <td>Cras convallis convallis dolor. Quisque tincidunt pede ac urna. Ut</td>
                  <td>9547 Ipsum Road</td>
                  <td>TS10 5RS</td>
                  <td>Chandler Y. Kim</td>
                  <td>0845 46 48</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1055&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Rutrum Fusce LLP</td>
                  <td>Fermentum Incorporated</td>
                  <td>aliquet nec, imperdiet nec, leo. Morbi neque tellus, imperdiet non,</td>
                  <td>Ap #407-1308 Ac Street</td>
                  <td>TS10 1EE</td>
                  <td>Harrison V. Cotton</td>
                  <td>0800 050 7059</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1065&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Rutrum Fusce LLP</td>
                  <td>Aenean Euismod Mauris Ltd</td>
                  <td>at, libero. Morbi accumsan laoreet ipsum. Curabitur consequat, lectus sit</td>
                  <td>648-5380 Amet, Avenue</td>
                  <td>TS25 1NN</td>
                  <td>Gray B. Nielsen</td>
                  <td>076 4356 7124</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1073&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Rutrum Fusce LLP</td>
                  <td>Pede Company</td>
                  <td>commodo tincidunt nibh. Phasellus nulla. Integer vulputate, risus a ultricies</td>
                  <td>946-2492 Vitae St.</td>
                  <td>TS18 3TS</td>
                  <td>Chiquita B. Kim</td>
                  <td>07928 528250</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1074&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Rutrum Fusce LLP</td>
                  <td>Egestas Fusce Aliquet Foundation</td>
                  <td>interdum. Nunc sollicitudin commodo ipsum. Suspendisse non leo. Vivamus nibh</td>
                  <td>958-9854 Nec, Rd.</td>
                  <td>TS5 4EE</td>
                  <td>Karina G. Cochran</td>
                  <td>[phone]</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1101&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Molestie Tellus Aenean Institute</td>
                  <td>Condimentum Foundation</td>
                  <td>adipiscing ligula. Aenean gravida nunc sed pede. Cum sociis natoque</td>
                  <td>222-3144 Augue Road</td>
                  <td></td>
                  <td>Barry W. Pacheco</td>
                  <td>0823 198 9123</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1179&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>A Facilisis Non PC</td>
                  <td>Arcu Ltd</td>
                  <td>convallis est, vitae sodales nisi magna sed dui. Fusce aliquam,</td>
                  <td>Ap #809-1130 Imperdiet Avenue</td>
                  <td>TS4 3PZ</td>
                  <td>Cassidy Z. Berg</td>
                  <td>0845 46 40</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1265&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Et Malesuada Foundation</td>
                  <td>A Consulting</td>
                  <td>vitae nibh. Donec est mauris, rhoncus id, mollis nec, cursus</td>
                  <td>Ap #580-5973 Eu Rd.</td>
                  <td>TS6 0TL</td>
                  <td>Ian G. Adams</td>
                  <td>(01138) 36946</td>
                  <td></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1296&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Cubilia Curae; PC</td>
                  <td>Risus Duis A Corporation</td>
                  <td>sem. Nulla interdum. Curabitur dictum. Phasellus in felis. Nulla tempor</td>
                  <td>Ap #748-7505 Morbi Road</td>
                  <td>TS18 1AN </td>
                  <td>Elijah A. Rivera</td>
                  <td>0953 430 7201</td>
                  <td>[email protected]</td>
                </tr>
                <tr>
                  <td><button class="btn btn-success waves-effect waves-light" href="edit.php?table=site&amp;id=1309&amp;a=0&amp;order_by=site_id&amp;back=1"><i class="fa fa-edit"></i>edit</button></td>
                  <td>Ornare Corp.</td>
                  <td>Ultrices Industries</td>
                  <td>et netus et malesuada fames ac turpis egestas. Aliquam fringilla</td>
                  <td>Ap #409-9329 Erat. St.</td>
                  <td>TS16 OAS</td>
                  <td>Jasper I. Foster</td>
                  <td>0800 332 1490</td>
                  <td></td>
                </tr>
              </tbody>
              <tfoot>
                <tr class="active">
                  <td colspan="9" class="footable-visible">
                    <div class="text-right">
                      <ul class="pagination pagination-split justify-content-end footable-pagination m-t-10 m-b-0">
                        <li class="footable-page-arrow disabled"><a data-page="first" href="#first">«</a></li>
                        <li class="footable-page-arrow disabled"><a data-page="prev" href="#prev">‹</a></li>
                        <li class="footable-page  active"><a href="list.php?table=site&amp;a=0&amp;order_by=site_id">1</a></li>
                        <li class="footable-page "><a href="list.php?table=site&amp;a=40&amp;order_by=site_id">2</a></li>
                        <li class="footable-page-arrow"><a data-page="next" href="#next">›</a></li>
                        <li class="footable-page-arrow"><a data-page="last" href="#last">»</a></li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

You could use vw for your table's units like in the example below.

/* CSS used here will be applied after bootstrap.css */
table {
max-width: 98vw;
margin: 0 1vw;
}

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

Try this updated Fiddle

Jutta

this was close, but there was no actual enforcement of the % (it seemed to show a "guess" based of column length, so columns were varying widths, but not varying according to the % if you get me.. also a scrollbar appeared on mobile.. despite there being a lot of "scrunch" room remaining).. I was almost able to make it work via tinkering (the idea was sound) but in the end another answer was able to achieve it without any amends – Photometer

Answer 6

I like to use bootstrap standard classes as much as possible. You can use table-sm and table-resonsive classes on your table to reduce padding and allow horizontal scroll respectively.

This can help a lot instead of creating lots of custom classes.

Whiteeye