如何隐藏引导表中的列？

在我使用Bootstrap的ASP.NET MVC Core应用程序中（默认情况下由Visual Studio 2015 MVC Core项目安装），我需要在控制器中使用ID列，但要将其隐藏在View中。但以下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>

来源

2016-10-12 nam

加上'风格= “visibility：hidden的”' –

或者你也可以添加属性'风格=：在两个''和'' –

@Div'风格= “能见度：隐藏” “显示无”''不不太工作。我刚刚在我的文章中添加了更新部分。 – nam

我测试过你在这个pen描述的行为。 “Bad Table”版本演示了我相信您可能会看到并发生的情况，因为忽略将display:none添加到该列中的单个th/td。 “好桌子”版本的第一列完全隐藏并伸展以填充整个可用宽度。

<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风格。

来源

2016-10-12 19:13:49

如何隐藏引导表中的列？

回答

相关问题