Bootstrap指定表格字段宽度

默认情况下，表格会占据屏幕所有宽度，可以使用bootstrap的布局功能。但表格标题字段的宽度必须与相应字段内容的宽度一致。

<div class="container">

     <div class="row"> //一行被分成12列，超过12列，将转移到下一行。

       <div class="col-md-4">

       </div>

    </div>

</div>

实例如下：

@using (Html.BeginForm("Index", "Course", FormMethod.Get, new { @class = "form-inline", role = "form" }))
{
<label for="courseType" class="control-label">课程类型：</label>
<div class="form-group">
@Html.DropDownList("courseType", ViewBag.courseTypeList as SelectList, "全部课程", new { @class = "form-control" })
</div>

<input type="submit" value="查找" class="btn btn-primary" />

}
<table class="table table-hover table-striped">
<thead>
<tr class="row">
<th class="col-md-2">   //注意，表头标题字段的宽度必须与相应字段内容的宽度一致。
@Html.DisplayNameFor(model => model.CourseName)
</th>
<th class="col-md-2">
@Html.DisplayNameFor(model => model.CourseType)
</th>
<th class="col-md-4">
@Html.DisplayNameFor(model => model.CourseDescription)
</th>
<th class="col-md-1">
@Html.DisplayNameFor(model => model.PriorOrder)
</th>
<th class="col-md-3"></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr class="row">
<td class="col-md-2">
@Html.DisplayFor(modelItem => item.CourseName)
</td>
<td class="col-md-2">
@Html.DisplayFor(modelItem => item.CourseType)
</td>
<td class="col-md-4">
@Html.DisplayFor(modelItem => item.CourseDescription)
</td>
<td class="col-md-1">
@Html.DisplayFor(modelItem => item.PriorOrder)
</td>
<td class="col-md-3">
@Html.ActionLink("编辑", "Edit", new { id = item.CourseID }, new { @class = "btn btn-primary btn-xs" })
@Html.ActionLink("详细", "Details", new { id = item.CourseID }, new { @class = "btn btn-primary btn-xs" })
@Html.ActionLink("删除", "Delete", new { id = item.CourseID }, new { @class = "btn btn-primary btn-xs" })
</td>
</tr>
}
</tbody>
<tfoot>
<tr class="text-info row" colspan="4">
<td>共有 @ViewBag.CourseCount 条记录</td>
</tr>

</tfoot>
</table>