设置引导响应表的最大宽度

时间:2017-01-27 15:18:54

标签: html css asp.net twitter-bootstrap

我遇到的问题是我的表中有一行(描述行),它是表中所有列的列跨度。当表没有响应时,这可以正常工作:

enter image description here

但是,当窗口调整为较小的大小时,表格会变为resonsive,并且由于文本全部位于一行,描述行的宽度非常大:

enter image description here

这是我的表格代码:

<div class="table-responsive">
<table class="table">
    <tr>
        <th>
            @Html.ActionLink("Title", "Details", new { id = Model.TaskGroup.ID, sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter }) <i class="fa fa-unsorted" aria-hidden="true"></i>
        </th>
        <th>
            @Html.ActionLink("Code", "Details", new { id = Model.TaskGroup.ID, sortOrder = ViewBag.CodeSortParm, currentFilter = ViewBag.CurrentFilter }) <i class="fa fa-unsorted" aria-hidden="true"></i>
        </th>
        <th>
            @Html.ActionLink("Supervisor", "Details", new { id = Model.TaskGroup.ID, sortOrder = ViewBag.SupervisorSortParm, currentFilter = ViewBag.CurrentFilter }) <i class="fa fa-unsorted" aria-hidden="true"></i>
        </th>
        <th>
            Preference
        </th>
        <th>

        </th>

        <th></th>
    </tr>


    @foreach (var item in Model.TaskEntitiesPaged)
    {
        <tr>
            <td>
                <b>
                    @Html.DisplayFor(modelItem => item.Name)
                </b>
                <br />
                @foreach (var tag in item.TaskEntityAssociatedTags)
                {
                    <a class="btn btn-default btn-xs" title="@tag.Tag.TagName">
                        <i class="" aria-hidden="true"></i> @tag.Tag.TagName
                    </a>
                }
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Code)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.AspNetUser.Forename)
                @Html.DisplayFor(modelItem => item.AspNetUser.Surname)

            </td>

            <td>
                @{
        var list = new TaskEntityAndPreferencesModel(item, Model.Preferences);
                }
                @Html.Partial("_Rating", list)
            </td>
            <td>
                <a class="btn btn-primary btn-xs" href="@Url.Action("Details", "TaskEntities", new { id = item.ID })" title="More Details">
                    <i class="fa fa-file-text-o" aria-hidden="true"></i> Details
                </a>
            </td>
            <td>
                @*@Html.ActionLink("Edit", "Edit", new { id = item.CourseID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.CourseID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.CourseID })*@
            </td>
        </tr>
        <tr>

            <td colspan="5">
                @Html.Raw(Html.Encode(item.Description.Length > 900 ? item.Description.Substring(0, 900) + @"..." : item.Description).Replace("\n", "<br />"))
            </td>
        </tr>
    }

</table>

我试图寻找一种为响应表设置最大宽度无效的方法,我也尝试设置标题的列宽,但这也不起作用。任何帮助表示赞赏。

0 个答案:

没有答案