1

何を試しても 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>),
})

ウェブグリッド 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;
   }

ここに画像の説明を入力

ここに画像の説明を入力

4

2 に答える 2

0

問題は、Visual Studio が生成した .css ファイルにあります。Content\Site.css を開くと、次のようなスタイル定義が見つかります。

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

テーブルの最大幅が小さすぎるため、大きくしてください。(そして、ブラウザをリロードします。b/c ブラウザは .css ファイルをキャッシュする傾向があります)

また、ラップが不適切な Table DataCell を次のように置き換えることで調整できます (ただし、最大幅を増やさずに調整するだけでは、他のセルが強制的にラップされます)。

于 2013-03-26T20:33:49.677 に答える