How to limit gridview control width?

Hi, I'm using VS2013, web form and C#
I used the web form template that came with bootstrap.  I have a gridview control with 9 columns.  The last 2 columns are too long and it extends out of the body content width, which I believe is 1170 px.  Is there a way to limit the datagrid control width not to grow beyond the body content width?  the follow CSS is taken form FireBug.  The class="container body-content" I believe defines the body container width of 1170 px for large screen.   thank you.

<div class="container body-content">
<div class="jumbotron">
<div class="navigate_buttons">
<div class="row spacer">
<table id="MainContent_gridIrb" cellspacing="0" cellpadding="4" align="Center" style="background-color:White;border-color:#CC9966;border-width:1px;border-style:None;width:98%;border-collapse:collapse;" rules="all">
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterSenior Software DeveloperCommented:
I see a few things worth noting...

1. What you've posted is HTML markup. Not CSS.

2. Use of the <table> element is not best practice for manipulating layouts. You should use a container <div> element instead.

3. If you're using Bootstrap, you can leverage the existing css styles for table layouts.

4. To solve your problem you most likely need to avoid using the width="" and height="" properties and use the cssClass="" property instead. Manipulate all of your layout with CSS.

If you want to provide more detail I could probably give you a few more pointers.
lapuccaAuthor Commented:
1.  I'm attaching my aspx and css file.  I also attached a screen cap of the css style in firebug when I select the grid.  
2.  the <table> tag you see is translated from gridview control in  It's not something I coded.
3.  The bootstrip is buit-in in the template I used.  

Yes, still need help to make sure this gridview control doesn't grow in width that goes outside of the defined body width.

Thank you.
#MainContent_gridIrb,  #MainContent_gridIrb * {
 max-width: 1170px;

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

table#MainContent_gridIrb{width: 98%; word-wrap:break-word;table-layout:fixed; } 

Open in new window

lapuccaAuthor Commented:
thanks everyone but this is a gridview control in  It doesn't have  word-wrap:break-word;table-layout:fixed as a property parameter that I can configure.    I also dont' want to set  max-width: 1170px; because it's using bootstrap.  Any way to configure this gridview control?  Thank you.
That was meant for your css file.  The markup that your grid is generating is the HTML you posted where you have a <table> with id='MainContent_gridIrb'.

So, if you have a css file, add the rule above OR add a <style> tag within the <head> of the document.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
As Russ Suter already pointed out, the use of the <table> element is not best practice for manipulating layouts.   Bootstrap does not like it , and if you try to do it anyway you will run into problems like you already are.  I understand that you don't want to set  a max-width value.  You are right, it would be best NOT to hardcode a fixed max-width value, however if you insist on using <table>s for layout purposes alongside Bootstrap you are going to have to settle for a hack.
lapuccaAuthor Commented:
Skij, the girdview control is intepreted as table.  It's not what I use.  What I have is a gridview control!  

I used your css in the div above the gridview control but I have to add the Overflow to make it work or it still overflow.

Thanks everyone.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.