8

I have a boostrap container div and inside it, I have a table:

<table id="reviewer_table" class="table table-hover table-striped table-condensed tasks-table">
<thead>
  // tr/td ... 
</tbody>
</table>

But for some reason, this table is too wide, that one column is actually outside of the right screen.

I am not sure what is causing the issue, so I am sharing the code to know if I am doing something wrong.

7
  • try to change the class of the container to container-fluid
    – Kaan
    Commented Apr 18, 2017 at 22:13
  • or explicitly set max-width of your table to 100%
    – Kaan
    Commented Apr 18, 2017 at 22:14
  • It is set to max-width: 100% - but I modified the dom and it does actually seem to change it... we'll see if this really is the solution since the table should somehow obey the parent properties
    – meskerem
    Commented Apr 18, 2017 at 22:15
  • you can try to add class row to each <tr> element and a class col-xs-? to each <td> element directly or place them in divs
    – Kaan
    Commented Apr 18, 2017 at 22:16
  • maybe those css styles for your table can also be useful table-layout: fixed;and word-wrap: break-word;
    – Kaan
    Commented Apr 18, 2017 at 22:20

6 Answers 6

27

Please add following div before your table

    <div class="table-responsive">
           Your table
    </div>
4
11

Add a class table-responsive in the table's parent div to achieve a responsive table.

9

I also came across this problem. I think it happens when the content in the table (like long strings) extends further than the container is wide. This post by CSS-Tricks helped me understand.

To fix it, I added table layout fixed to my CSS for the <table> like so (I only specified this for one use case with a class of speaker-list):

table.speaker-list {
  table-layout: fixed;
}

It defaults to equal-width columns, so you can put classes on the table headers <th> to specify different widths like 10% vs 40%. The CSS-tricks article has great examples.

2

Bootstrap 4: add table-responsive in the table element and it will make the table to stay inside the div. The table will become horizontally scrollable

<table class="table table-responsive">
0

Maybe post the whole code of your table, as it is perfectly working for me.

<div class="container">
  <table id="reviewer_table" class="table table-hover table-striped table-condensed tasks-table">
  <thead>
    <tr>
      <th>Username</th>
      <th>Password</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
    <tr>
      <td>asdsada</td>
      <td>asdsada</td>
      <td>asdsada</td>
    </tr>
  </tbody>
  </table>
</div>

Try it here: jsfiddle.net

0
   **everything worked fine.**

      <div class="container">
       <table id="reviewer_table" class="table table-hover table-striped 
          table-condensed tasks-table">
         <thead>
            <tr> 
              <td>abc </td>
              <td> def</td>
              <td> ghi </td>
            </tr>
         </thead>

         <tbody>
           <td> jkl</td>
           <td> mno </td>
           <td>pqr</td>

        </tbody> 
        <tbody>
          <td> asdf</td>
          <td> adfd </td>
          <td>dfdf</td>

       </tbody> 


     </table>

    </div>


      [OUtput][1]

      [1]: https://i.sstatic.net/IrCMK.jpg

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.