CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
meskerem
meskerem

Reputation: 399

bootstrap table inside container div is out of browser width

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.

Upvotes: 9

Views: 29637

Answers (6)

Alex Olivieri
Alex Olivieri

Reputation: 31

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">

Upvotes: 2

Sia
Sia

Reputation: 9212

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.

Upvotes: 9

R. Saranya
R. Saranya

Reputation: 188

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

Upvotes: 11

J. Shabu
J. Shabu

Reputation: 1053

Please add following div before your table

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

Upvotes: 27

Ranjan
Ranjan

Reputation: 11

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

Upvotes: 0

Mariano W.
Mariano W.

Reputation: 26

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

Upvotes: 0

Related Questions