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>