MVC 3 Razor webgrid - 如何更改表格宽度

Question

我有一个问题，无论我尝试什么，我都无法更改网络网格表格的宽度。它忽略其父 div 的 css，并且使用 css 更改网格的宽度没有任何效果。

Webgrid 部分视图

@model IEnumerable<UserManager.Models.vw_UserManager_Model>
@{WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");}
<b>@Html.Label("Total number of records displayed: ")</b>
@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: @<text><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" /></text>),
    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:@<text><div id="btnEditSelectedRow">
         @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)</div></text>),

    grid.Column(header:"Delete", format:@<text><div id="btnDelSelectedRow">
         @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)</div></text>),
})

Webgrid CSS

.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;
   }

Answer 1

问题出在 Visual Studio 生成的 .css 文件中。打开 Content\Site.css & 你会发现一个样式定义，如：

   .content-wrapper {
       margin: 0 auto;
       max-width: 960px;
   }

最大宽度对于您的表格来说太小，因此请将其放大。 （并重新加载浏览器，因为浏览器倾向于缓存 .css 文件）

此外，您可以通过替换为来调整换行不良的Table DataCell（尽管，如果您只调整不增加最大宽度，则会强制其他一些单元格换行）

Answer 2

MVC3 生成的 Site.css 具有 .page {width: 98%;} 您可以将其更改为某个固定值，例如“width: 2000px;”。这很有帮助，但如果有人知道如何使其扩展到 WebGrid 的大小，那就更好了！