0
我想將滾動條添加到我的html表格中,然後根據我的喜好更改表格列的寬度,但表格的列寬沒有受到影響。這是我的表格html。如何在ASP.Net中設置html表格的寬度屬性MVC5
所以基本上我想要的是表的寬度應該根據父容器的寬度(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和引導代碼保持不變。
我試過使用這個屬性以及。但問題是我想要手動設置屬性的寬度,並且如果所有列的整體通用寬度超出了網格的寬度,則應該執行水平滾動。現在我正在獲取水平滾動條,但它的殘疾人 – WAQ