table controls dont move with width of table

blessyou

table is working fine. I use this code:

<

table width="90%" class="table table-striped table-bordered table-hover " id="example" cellspacing="0" >

This reduces the table to a nice 90% centre position..but the table controls i.e. search , pagination etc in the corners all stay at 100% any ideas?

gyrocode

You need to change width of the container element, not the table itself.

For example

<div class="row">
   <div class="col-sm-8 col-sm-offset-2"> 
      <table class="table table-striped table-bordered table-hover " id="example" cellspacing="0">
      </table>
   </div>
</div>

---

See more articles about jQuery DataTables on gyrocode.com.

blessyou

Thanks so much for reply. the 'show entries' are alighned nicely to table but the 'search' bar and the pagination are good few pixels to the left . any ideas? also for my own info,,why does div class row do this and not automated with width?

blessyou

also the table is a bit off right and not central on page

gyrocode

You can apply fixed width to the container element if you want. I just noticed you're using Bootstrap framework and demonstrated use of grid instead of hard-coding width value.

The idea is that you need to change the width of container, not the table itself.

See this example for demonstration.

---

See more articles about jQuery DataTables on gyrocode.com.

blessyou

fair one,, just thougt i d try and save a few more hours playing around...thx for explaining.

blessyou

actually,,soory to keep asking,,,i played around with the numbers on bootstrap sm 8 sm 6 etc, but they all looked crap... why doesn't anything align nicely?...should i go look on their site or is bootstrap that bad?