Как задать полную ширину и высоту поля ввода - PullRequest
0 голосов
/ 25 апреля 2019

Я работаю над таблицей 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

Ответы [ 3 ]

1 голос
/ 25 апреля 2019

установить td padding в 0,

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);
    color: black;
    padding: 0;
}
0 голосов
/ 25 апреля 2019

вы можете установить отступы на 0

padding: 0px 0px 0px 0px;
0 голосов
/ 25 апреля 2019
please replace container class to container-fluid
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...