Я работаю над таблицей HTML, внутри которой некоторые из моих cells
имеют тип input field
, поэтому моя проблема в том, что поле ввода не принимает полную ширину и высоту ячейки, что вызывает проблемы для меня как для моей таблицыимеет много строк, и я должен показывать максимальное количество данных на одной странице.
Здесь из-за того, что поле ввода не корректируется полностью внутри ячейки таблицы td
я должен дать некоторую высоту со своей стороны, чтобы увеличить размерполя ввода, которое мне не нужно
код
table {
border-collapse: separate !important;
}
td input {
width: 100%;
}
table.table-bordered>thead>tr>th {
border: 1px solid white;
white-space: nowrap;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
transform: translateY(-4px);
}
/* background-color: #00998C */
table.table-bordered>tbody>tr>td {
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
color: black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container ">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>AGE</th>
<th>Occupation</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td>22</td>
<td>govt. employ</td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
</div>
</div>
Так как мне полностью настроить поле ввода внутри ячейки таблицы с полной шириной и высотой в качестве ячейки таблицы td