html - 如何为输入字段提供完整的宽度和高度

Question

我正在处理一个 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

Answer 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;
}