如何隱藏引導表中的列？

在我使用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

如何隱藏引導表中的列？

回答

相關問題