（我对网络编程比较陌生，所以它可能是一个容易被忽视的问题）
我正在使用 ASP.NET MVC4 构建一个应用程序，其中包含一个显示 jqGrid 的剃刀视图。它使用 ajax 动态获取列元数据，并且数据似乎都返回正常。当我运行应用程序并显示视图时，会显示数据，但网格的标题和正文都会溢出网格（见图）。
我确实注意到数据下方似乎有一条警告，说明“请选择行”。我怀疑问题是 CSS 或与警告有关。我曾尝试更改 ui.jqgrid.css、site.css 等中的各种属性，但无济于事。
这是呈现的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Feed List Preview</title>
<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="/Content/site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="/Content/themes/redmond/jquery-ui-1.9.0.custom.min.css" type="text/javascript"></script>
<script src="/Content/jquery.jqGrid/ui.jqgrid.css" type="text/javascript"></script>
<script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.src.js" type="text/javascript"></script>
<script type="text/javascript">
var jqDataUrl = "LoadData";
var jqMetaUrl = "GetColumnData";
$(document).ready(function () {
$.ajax(
{
type: "POST",
url: jqMetaUrl,
data: "",
dataType: "json",
success: function (result) {
col_names = result.colNames;
col_model = result.colModel;
$("#jqTable").jqGrid({
url: jqDataUrl,
datatype: "json",
mtype: "POST",
//Specify the column names
colNames: col_names,
//Configure the columns
colModel: col_model,
//Grid total width and height
width: 800,
shrinkToFit:false,
height: 400,
//Paging
toppager: true,
pager: $('#jqTablePager'),
rowNum: 25,
rowList: [25, 50, 100],
viewrecords: true, //Specify if total number of records is displayed
//Formatting
altRows: true
//Default Sorting (ignored)
//Grid Caption
//caption: "Feed List Preview"
}).navGrid("#jqTablePager",
{ refresh: true, add: false, edit: false, del: false },
{}, //settings for edit
{}, //settings for add
{}, //settings for delete
{ sopt: ["cn"] } //search options, Some options can be set on column level
)
},
error: function (x, e) {
alert("ReadyState: " + x.readyState + "; Status:" + x.status + "; Message:" + e.msg + ";");
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>
Header
</h1>
</div>
<h2>Feed List Preview</h2>
<div>
<table id="jqTable" class="scroll"></table>
<div id="jqTablePager" />
</div>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
</body>
</html>