如何在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>其中