How to hide a column in a bootstrap table? - asp.net-mvc

Question

In my ASP.NET MVC Core app that uses Bootstrap (installed by default by Visual Studio 2015 MVC Core project), I need to use ID column in a controller but want to hide it in the View. But the following View still displays the column as blank. I would like to hide the first columns that is the ID column
View:
#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

I've tested the behavior you describe in this pen. The "Bad Table" version demonstrates what I believe you are likely seeing and occurs by neglecting to add display:none to one single th/td in that column. The "Good Table" version has the first column completely hidden and stretches to fill the entire available width.
<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>
Long and short, check the rendered output and ensure that each th/td in the column you are hiding ended up with the display:none style.