A table is placed on the page in the bootstrap cell, a sufficient number of columns in the table, and on the laptop screens this table goes beyond the limits of the cell allocated for it enter image description here

page code in this location:

<div class="col-md-9"> <div class="row tablica"> <table class="table table-striped tablesorter"> <thead> <tr> ..... <th>класс</th> <th>расположение</th> </tr> </thead> <tbody> ... <tr> <td>текст</td> <td>текст</td> </tr> <tr> <td>текст</td> <td>текст</td> </tr> </tbody> </table> </div> </div>

How to make the table completely fit in the block allocated to it, and the text in wide columns disappear beyond the boundaries of the columns, but with a hover on a cell of the table "went" "back and forth"?

  • Table code add ... So we can not understand what's the matter - E1mir
  • @KryTer_NexT, added - user193361

1 answer 1

If you write that there is a sufficient number of rows in the table, maybe it doesn’t fit in the space allotted to it? If so, use .table-responsive

 <div class="col-md-9"> <div class="row tablica table-responsive"> <table class="table table-striped tablesorter"> ... </table> </div> </div>
  • at table-responsive, the table got into the block assigned to it, but at the same time a good part of the table data was hidden under the scroll bar. I wanted the cells themselves to decrease in the table, and the text itself floated around the cell while hover-e user193361