Скрытие текстового поля в html занимает пространство

Вопрос:

Я пытаюсь скрыть поле ввода с идентификатором site_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>

Может ли кто-нибудь сказать мне, как скрыть это, не занимая места?

Лучший ответ:

Я думаю, было бы лучше изменить тип ввода на скрытый, но чтобы избежать дополнительной ячейки, вы должны переместить “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>

Ответ №1

Вместо этого добавьте стиль в <td>.

Вы не скрываете тег, поэтому он все еще “занимает место”.

Кроме того, хорошей практикой является использование CSS вместо стилей жесткого кодирования в тегах, так как это позволяет упростить обслуживание (скажем, вы хотите изменить “скрытые” теги на “серые”, просто измените стиль класса и все свои страницы будет обновлено):

HTML

<td class="inactive"> <input ... /> </td>

CSS

.inactive { display:none }

Ответ №2

Вместо того, чтобы скрывать input, скройте 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>

Javascript:

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

И вот JSFiddle.

Ответ №3

Использовать ниже код в теге таблицы

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

Таким образом, пространство будет удалено. Надеюсь это поможет….

Оцените статью
TechArks.Ru
Добавить комментарий