Question

Я пытаюсь заставить таблицу вести себя "правильно" (и правильно я имею в виду)

используйте проценты ширины, которые я дал
не переносить, вместо этого используйте многоточие при любом переполнении

Bootstrap говорит, что у меня может быть ширина , который я указываю как проценты максимальной ширины, встроенные в разметку стиля тега th

 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/

ИЛИ указанная мной высота без переноса ... но не обе

  /* 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/

Но как мне сделать так, чтобы страница не переносила слова (только одну строку), но в то же время подчинялась встроенному%, который я ей дал.

Мало того, что многоточие не запускается и появляется огромная нелепая горизонтальная прокрутка со страницы (внизу), но нижний элемент управления нижнего колонтитула перемещается за пределы экрана вправо.

Хотелось бы иметь:

встроенные проценты
если оно слишком узкое, используйте многоточие и не оборачивайте.

не должно быть так сложно

Prince · Answer 1 · 01 ноября 2018

Возможно, вы можете попробовать vw вместо

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

Ссылка на скрипку -> https://jsfiddle.net/DTcHh/95902/

Peter Darmis · Answer 2 · 31 октября 2018

/* 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>(023) 5448 8145</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>(0101) 335 6990</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>(0151) 007 1887</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>(0151) 264 4219</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>(028) 0554 2628</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>graham.brittle@knightfrank.com</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>

Вы можете использовать vw для единиц вашей таблицы, как в примере ниже.

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

Попробуйте это обновление Fiddle

Arun · Answer 3 · 26 октября 2018

Эй, мы можем просто переопределить TD с помощью css

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

Вы можете указать любую ширину, образец я обновил в https://jsfiddle.net/n85026uy/11/

Roman86 · Answer 4 · 30 октября 2018

используйте эти стили CSS:

для вашего table

        table-layout: fixed;

для th, td

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

и используйте inline (это не правила CSS, это важно) width (не max-width) для элементов th , например:

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

Вы можете использовать px вместо % или других единиц

дополнительная прокрутка, которую вы можете получить из-за использования класса .row, который добавляет некоторую отрицательную маржу. Вы должны убедиться, что компенсировали это, используя соответствующий класс / стили оболочки / контейнера

mkk · Answer 5 · 27 августа 2018

Устранение проблемы с размещением таблицы должно решить проблему, она принимает ширину, а также эллипсы. Если вы не установите ширину строки, столбцы должны иметь равную ширину.

.table{
 table-layout: fixed;
}

Или оберните текст td в div <td><div>text</div></td>

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

Обновил свою скрипку

столбцы начальной загрузки таблицы слишком широки, когда я установил без переноса

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 5 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

столбцы начальной загрузки таблицы слишком широки, когда я установил без переноса

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 5 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы