title: MVC 3 Razor webgrid - how to change the table width
body: <p>I have a problem where whatever I try I can't change the width of the webgrid table. It ignores the css of its parent div and changing the width of the grid using css doesn't have any effect.</p>
  
  <p><strong>Webgrid partial view</strong></p>
  
  <pre><code>@model IEnumerable&lt;UserManager.Models.vw_UserManager_Model&gt;
  @{WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");}
  &lt;b&gt;@Html.Label("Total number of records displayed: ")&lt;/b&gt;
  @Html.Label(grid.TotalRowCount.ToString())
  @grid.GetHtml(
      fillEmptyRows: true,
          tableStyle: "webgrid",
                  alternatingRowStyle: "webgrid-alternating-row",
                  headerStyle: "webgrid-header",
                  footerStyle: "webgrid-footer",
                  selectedRowStyle: "webgrid-selected-row",
              rowStyle: "webgrid-row-style",
          mode: WebGridPagerModes.All,
  columns: new[] {
      grid.Column("UserName"),
      grid.Column("salutation"),
      grid.Column("FirstName"),
      grid.Column("LastName"),
      grid.Column("Password"),
       grid.Column(header: "Session Status", canSort: true, format: @&lt;text&gt;&lt;input name="User logged in" 
        type="checkbox"  @(item.session_status == 1 ? "Checked" : null) onclick="logUserOff('@Url.Action("LogUserOff", "UserManager", new {userid = item.userid} )')" id="chkboxIsActive" /&gt;&lt;/text&gt;),
      grid.Column("isactive"),
      //grid.Column("isapproved"),  
      grid.Column("MaxConcurrentUsers"),
      grid.Column("email"),
      grid.Column("group_name"),
     grid.Column("module_name"), 
       grid.Column(header:"Edit", format:@&lt;text&gt;&lt;div id="btnEditSelectedRow"&gt;
           @Html.ActionLink("Edit record", "EditUser", "UserManager", new {
           userid = item.userid,
           salutation = item.salutation,
           firstname = item.FirstName, 
           lastname = item.LastName, 
           password = item.Password, 
           isactive = item.isactive,
           isapproved = item.IsApproved,
           maxconcurrentusers = item.MaxConcurrentUsers,
           email = item.email, 
           rowtype = item.rowtype,
           module = item.module_name, 
           group = item.group_name }, null)&lt;/div&gt;&lt;/text&gt;),
  
      grid.Column(header:"Delete", format:@&lt;text&gt;&lt;div id="btnDelSelectedRow"&gt;
           @Html.ActionLink("Delete record", "DeleteUser", "UserManager", new {
           userid = item.userid,
           username = item.UserName,
           salutation = item.salutation,
           firstname = item.FirstName, 
           lastname = item.LastName, 
           password = item.Password, 
           isactive = item.isactive, 
           email = item.email, 
           module = item.module_name, 
           rowtype = item.rowtype,
           group = item.group_name }, null)&lt;/div&gt;&lt;/text&gt;),
  })
  </code></pre>
  
  <p><strong>Webgrid CSS</strong></p>
  
  <pre><code>.webgrid
      {
          width: 500px;
          border: 0px;
          border-collapse: collapse;
          oveflow:scroll auto;
      }
  
      .webgrid a
      {
         color: #000;
     }
  
     .webgrid-header
     {
         padding: 6px 5px;
         text-align: center;
         background-color: #e8eef4;
         border-bottom: 2px solid #3966A2;
         height: 40px;
  
         border-top: 2px solid #D6E8FF;
         border-left: 2px solid #D6E8FF;
         border-right: 2px solid #D6E8FF;
     }
  
     .webgrid-footer
     {
         padding: 6px 5px;
         text-align: center;
         background-color: #e8eef4;
         border-top: 2px solid #3966A2;
         height: 30px;
  
         border-bottom: 2px solid #D6E8FF;
         border-left: 2px solid #D6E8FF;
         border-right: 2px solid #D6E8FF;
     }
  
     .webgrid-alternating-row
     {
         height: 30px;
         background-color: #f2f2f2;
         border-bottom: 1px solid #d2d2d2;
  
         border-left: 2px solid #D6E8FF;
         border-right: 2px solid #D6E8FF;
     }
  
     .webgrid-row-style
     {
         height: 30px;
         border-bottom: 1px solid #d2d2d2;
  
         border-left: 2px solid #D6E8FF;
         border-right: 2px solid #D6E8FF;
     }
  
     .webgrid-selected-row
     {
         font-weight: bold;
     }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/YMhEk.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/9harT.png" alt="enter image description here"></p>