在html中隐藏文本字段会占用空间

我试图隐藏id为

site\u id

的输入字段。当我运行代码时，字段是隐藏的，但仍然会占用空间

<!--MANAGEMENT DEPARTMENT-->
<div class="tab-pane" id="department">  
    <div class="container center" id="dept-container">
        <h3 class="center">Departments Management</h3>
        <table class="table table-striped table-hover" id="table-manage-user">
            <thead>
            <tr>
                <td><label>Name</label></td>
                <td><label>Email</label></td>
                <td><label>Phone</label></td>

            </tr>
            </thead>
            <tr>
                <form method="post" action="temp.php">
                <td><input type="text" class="form-control" placeholder="Name" autofocus name="depart_name" id="depart_name" required aria-required="true"></td>
                <td><input type="text" style="display: none" class="site_id" placeholder="siteID" disabled="disabled"name="site_id" id="site_id"  value= ""></td>
                <td><input type="email" class="form-control" placeholder="Email" autofocus name="depart_email" id="depart_email" ></td>
                <td><input type="text" class="form-control" placeholder="Phone" autofocus name="depart_phone" id="depart_phone" required aria-required="true"></td>
                </form>
            </tr>

        </table>
    </div>        
</div>

部门管理
名称
电子邮件
电话

---

有人能告诉我如何隐藏它而不占用任何空间吗？

在表的标记中使用下面的代码

<td style="display: none"> </td>

因此，空间将被删除。

---

希望这有助于….

将样式添加到

标记中

您没有隐藏标签，因此它仍然“占用空间”

此外，使用CSS而不是将样式硬编码到标记中是一种很好的做法，因为它允许更容易的维护（假设您想将“隐藏”标记更改为灰色，您只需更改类样式，所有页面都将更新）：

HTML

---

我认为最好将输入类型更改为隐藏，但为了避免额外的单元格，您应该将“display:none”移动到td标记：

            <td style="display: none"><input type="text" class="site_id" placeholder="siteID" disabled="disabled"name="site_id" id="site_id"  value= ""></td>

---

不要隐藏

输入，而是隐藏
td
，如下代码所示：

HTML：

<!--MANAGEMENT DEPARTMENT-->
<div class="tab-pane" id="department">  
    <div class="container center" id="dept-container">
        <h3 class="center">Departments Management</h3>
        <table class="table table-striped table-hover" id="table-manage-user">
            <thead>
            <tr>
                <td><label>Name</label></td>
                <td><label>Email</label></td>
                <td><label>Phone</label></td>

            </tr>
            </thead>
            <tr>
                <form method="post" action="temp.php">
                <td><input type="text" class="form-control" placeholder="Name" autofocus name="depart_name" id="depart_name" required aria-required="true"></td>
                <td id="site_id_td"><input type="text" class="site_id" placeholder="siteID" disabled="disabled"name="site_id" id="site_id"  value= ""></td>
                <td><input type="email" class="form-control" placeholder="Email" autofocus name="depart_email" id="depart_email" ></td>
                <td><input type="text" class="form-control" placeholder="Phone" autofocus name="depart_phone" id="depart_phone" required aria-required="true"></td>
                </form>
            </tr>

        </table>
    </div>        
</div>

$("#site_id_td").hide();

并且是JSFIDLE。
使用
可见性：隐藏
而不是
显示：无
。或者将
类型
更改为
隐藏
。在
上添加
显示：无
，您的代码仍将呈现表格单元格，这是OP的实际问题。@user3830694正如我第一次想到的，他只需要隐藏输入字段，这就是我回答的原因。希望你能理解。。。这不是不知道，而是理解。perfector先生根本没有将隐藏的输入元素放入表中。
<!--MANAGEMENT DEPARTMENT-->
<div class="tab-pane" id="department">  
    <div class="container center" id="dept-container">
        <h3 class="center">Departments Management</h3>
        <table class="table table-striped table-hover" id="table-manage-user">
            <thead>
            <tr>
                <td><label>Name</label></td>
                <td><label>Email</label></td>
                <td><label>Phone</label></td>

            </tr>
            </thead>
            <tr>
                <form method="post" action="temp.php">
                <td><input type="text" class="form-control" placeholder="Name" autofocus name="depart_name" id="depart_name" required aria-required="true"></td>
                <td id="site_id_td"><input type="text" class="site_id" placeholder="siteID" disabled="disabled"name="site_id" id="site_id"  value= ""></td>
                <td><input type="email" class="form-control" placeholder="Email" autofocus name="depart_email" id="depart_email" ></td>
                <td><input type="text" class="form-control" placeholder="Phone" autofocus name="depart_phone" id="depart_phone" required aria-required="true"></td>
                </form>
            </tr>

        </table>
    </div>        
</div>

$("#site_id_td").hide();