html - 如何在 ASP.Net MVC 5 中设置 html 表格宽度属性

Question

我正在尝试将滚动条添加到我的 html 表格，然后根据自己的喜好更改表格列的宽度，但表格的列宽没有受到影响。这是我的表格 html。

所以基本上我想要的是表格的宽度应该根据父容器的宽度(下面的 tbody->inherit)。然后将列添加到表格中并根据我的喜好设置它们的宽度。如果表格需要水平滚动，它应该出现。问题是列宽没有随着下面的标记而改变，因此滚动没有按预期工作。

// css code for trial purpose
<style type="text/css">
    .col1 {
        width: 75%;
    }
</style>

<table class="table" style="table-layout: fixed; overflow:scroll">
<tbody style="display: block; overflow: scroll; height:400px; width: inherit">
    <tr>
        <th class="col1"> // also tried style="width:25%" and class="col-lg-2" as well
            @Html.DisplayNameFor(model => model.Project.PROJECT_NO)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Project.TITLE)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Project.DESCRIPTION)
        </th>
        <th >
            @Html.DisplayNameFor(model => model.Project.AWARD_DATE)
        </th>
        <th >
            @Html.DisplayNameFor(model => model.Project.SCH_START_DATE)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Project.SCH_END_DATE)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Project.PROJECT_NO)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Project.TITLE)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Project.DESCRIPTION)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Project.AWARD_DATE)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Project.SCH_START_DATE)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Project.SCH_END_DATE)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Project.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.Project.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Project.ID })
            </td>
        </tr>
    }
</tbody>

P.S:这是 Visual Studio 2013 的默认 ASP.Net MVC 5 应用程序，因此 css 和 Bootstrap 代码未更改。

Answer 1

表格有宽度属性。你可以利用它。 检查 http://www.w3schools.com/tags/att_table_width.asp>这里