ASP.Net MVC5에서 html 테이블의 너비 속성을 설정하는 방법

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는 다음 CSS와 부트 스트랩 코드가 변경되지 않습니다 그래서 이것은 비주얼 스튜디오 2013의 기본 ASP.Net MVC (5) 응용 프로그램입니다.

Answer 1

테이블에 너비 속성이 있습니다. 당신은 그것을 사용할 수 있습니다. http://www.w3schools.com/tags/att_table_width.asp> 여기를 확인하십시오.