如何隐藏引导表中的列？答案

【问题标题】：How to hide a column in a bootstrap table?如何隐藏引导表中的列？
【发布时间】：2016-10-12 18:23:43
【问题描述】：

在我使用 Bootstrap 的 ASP.NET MVC Core 应用程序中（由 Visual Studio 2015 MVC Core 项目默认安装），我需要在控制器中使用 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>

【问题讨论】：

添加style="visibility: hidden"
或者你可以在<td>和<th>中添加属性style="display: none"
@Div style="visibility:hidden" 不太好用。我刚刚在我的帖子中添加了一个更新部分。
@ArasuRRK style="display:none" 不太好用。我刚刚在我的帖子中添加了一个更新部分。
@ArasuRRK 您可能建议的是用户Chris Pratt 在下面显示的内容 - 它有效（谢谢）。

标签： asp.net-mvc twitter-bootstrap visual-studio-2015

【解决方案1】：

我已经测试了您在此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 样式结束。

【讨论】：