Блог

Главная - Вопросы по программированию - Как задать полную ширину и высоту поля ввода

Как задать полную ширину и высоту поля ввода

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

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

Ответ №1:

установите для 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;
}

Ответ №2:

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

 padding: 0px 0px 0px 0px;

Ответ №3:

 please replace container class to container-fluid

Комментарии:

1. таким образом, таблица получит полную ширину, я хочу задать полную ширину и высоту моим полям ввода внутри td