Question

我有一个问题，无论我尝试什么，我都无法改变webgrid表的宽度。它忽略了它的父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;
   }

enter image description here

Answer 1

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

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

最大宽度对于您的桌子来说太小了，所以放大它。（并重新加载浏览器b / c broswers倾向于缓存.css文件）

此外，您可以通过替换来调整具有错误包装的Table DataCell（尽管如果您只调整w / out增加最大宽度，它将强制其他一些单元格换行）

Answer 2

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

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

2 个答案: