부트 스트랩 테이블에서 열을 숨기는 방법은 무엇입니까?

Question

기본적으로 Visual Studio 2015 MVC 핵심 프로젝트에 의해 설치된 부트 스트랩을 사용하는 ASP.NET MVC 핵심 응용 프로그램에서는 컨트롤러에서 ID 열을 사용해야하지만보기에서 숨길 수 있습니다. 그러나 다음 View 여전히 열이 빈 것으로 표시됩니다. 내가보기에게 ID 열

에게 첫 번째 열을 숨기 싶습니다 :

@model List<myProj.Models.StateName> 

<form id="target" asp-controller="TestController" asp-action="TestAction" asp-route-returnurl="@ViewData[" ReturnUrl"]" method="post"> 
    <table class="table"> 
     <thead> 
      <tr> 
       <th></th> 
       <th> 
        State Name 
       </th> 
       <th> 
        State Code 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      @for (int i = 0; i < Model.Count(); i++) 
      { 
      <tr> 
       <td><input asp-for="@Model[i].StateId" type="hidden" /></td> 
       <td> 
        <label asp-for="@Model[i].State"></label> 
       </td> 
       <td> 
        <input asp-for="@Model[i].StateCode" type="text" readonly style="border:0px;"/> 
       </td> 
      </tr> 
      } 
     </tbody> 
    </table> 
    <button type="submit" class="btn btn-default">Save</button> 
</form> 

Answer 1

난 당신이 pen에서 설명하는 동작을 테스트했습니다. "Bad Table"버전은 해당 열의 th/td 하나에 display:none을 추가하지 않음으로써 내가보고 믿을 수 있다고 생각하는 것을 보여줍니다. "Good Table"버전은 첫 번째 열이 완전히 숨겨져 있으며 사용 가능한 전체 너비를 채우기 위해 늘어납니다.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<h2>Good Table</h2> 
 

 
<table class="table"> 
 
    <thead> 
 
     <tr> 
 
      <th style="display:none">Column 1</th> 
 
      <th>Column 2</th> 
 
      <th>Column 3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td style="display:none">Data 1.1</td> 
 
      <td>Data 1.2</td> 
 
      <td>Data 1.3</td> 
 
     </tr> 
 
     <tr> 
 
      <td style="display:none">Data 2.1</td> 
 
      <td>Data 2.2</td> 
 
      <td>Data 2.3</td> 
 
     </tr> 
 
     <tr> 
 
      <td style="display:none">Data 3.1</td> 
 
      <td>Data 3.2</td> 
 
      <td>Data 3.3</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<h2>Bad Table</h2> 
 

 
<table class="table"> 
 
    <thead> 
 
     <tr> 
 
      <th style="display:none">Column 1</th> 
 
      <th>Column 2</th> 
 
      <th>Column 3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td style="display:none">Data 1.1</td> 
 
      <td>Data 1.2</td> 
 
      <td>Data 1.3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Data 2.1</td> <!-- WHOOPS --> 
 
      <td>Data 2.2</td> 
 
      <td>Data 2.3</td> 
 
     </tr> 
 
     <tr> 
 
      <td style="display:none">Data 3.1</td> 
 
      <td>Data 3.2</td> 
 
      <td>Data 3.3</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

길고 짧은

는 렌더링 된 출력을 확인하고 열의 각 th/ td 당신이 display:none 스타일로 결국 숨어되어 있는지 확인합니다.