Question

我有以下（下面的屏幕截图）库存/开箱即用的mvc3应用程序。如图所示，如果数据集非常大，html表将从页面主体运行。

问：如何调整页面/正文的大小以使网格适合页面体？

这是开箱即用的东西所以如果您再进行重新编码，请告诉我们？ THX！

索引视图（标准...删节...）

<table>
    <tr>
        <th>
            Name
        </th>
        ...
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        ....

        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PersonId }) |
            @Html.ActionLink("Details", "Details", new { id=item.PersonId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.PersonId })
        </td>
    </tr>
}

布局视图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

enter image description here

Answer 1

Content / Site.css文件夹中的#main可能有宽度。删除或调整你的乐趣？

Answer 2

好的，这基本上是一个CSS问题。

内容在DIV中呈现，页面类别为：

.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

因此，我们已经获得了90％的浏览器窗口。

你有桌子的白色位是＆＃34;部分＆＃34; - HTML5，还没到我的脑海！ - ID为main：

#main {
    padding: 30px 30px 15px 30px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
 }

这里的关键位是填充，因此页面内的白色区域为30px。

默认情况下，表的大小没有限制，因此该部分溢出。

因此，要修复你需要使用CSS - 你需要做什么将取决于你想要修复的样子（以及它在我的舒适区之外的方式）。

Answer 3

从你的图像看起来所有的行都显示在一起，所以这不好......确保代码就像你给它的那样，即tr元素正确地打开和关闭，也许有你没有给出的一些代码中存在的问题导致它无法关闭。

如果我是你，我会尝试让所有东西变小，而是尝试让我的行合适（如果需要的话，减少列数）。

话虽如此，你可以根据需要使用css和/或javascript，我不知道你的css是什么样的，但你可以尝试以下方法：

将表格{ width :100%; }或{ max-width :100%; }添加到您的css
尝试使用javascript设置大小，您可能需要更改字体大小，因此您可以尝试这样的事情（假设您正在使用jquery，否则您需要将其转换为您正在使用的任何内容）：
```
$(function() {
    var factor = $('table').width()/window.innerWidth
    if (factor > 1)
        $('table').css('font-size' function(ind, value) { return value / factor; })
})
```

同样，这不是我认为的最佳方式，但我希望有所帮助

Answer 4

对此的一个解决方案是编写新样式，将此样式放在style.css中。它与.page样式完全相同，但宽度更大。

页面宽度来自_layout.cshtml。所以我们必须替换名为.page的类中存在的宽度。

您将把此宽度应用于您有更多列的特定页面。

.pageWidthForMoreColumns
{
    width: 135%;
    margin-left: auto;
    margin-right: auto;
}

并在page.cshtml中（应显示更多列）。编写一个Jquery来替换.Page到pageWidthForMoreColumns。

 <script language="javascript" type="text/javascript">
    $("#PageWidth").removeClass("page").addClass("pageForAdvancedSearchResults");
</script>

你需要为_Layout.cshtml为div标签添加一个ID属性，我添加了PageWidth

喜欢这个

<body>
    <div class="page" id="PageWidth">
        <div id="header">
            <div id="title">

Answer 5

您将其div类设置为“表格响应”，如：在这种情况下，表格将在div

中滚动

<div class="table-responsive" style="width:100%;">
    <table class="table" style="width:100%" >
    <tr>
        <th>
            Name
        </th>
         ...
    </tr>

    @foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        ....

        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PersonId }) |
            @Html.ActionLink("Details", "Details",new { id=item.PersonId })|
            @Html.ActionLink("Delete", "Delete", new { id=item.PersonId })
        </td>
    </tr>
    }
    </table>
</div>

如何使用html网格调整页面主体（运行页面）？

5 个答案: