如何在ASP.Net中设置html表格的宽度属性MVC5​​

Question

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

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

// 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和引导代码保持不变。

Answer 1

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