如何将输入标签用于 table - table td 全尺寸列

Question

我正在尝试将输入标签用于 table 而输入标签没有任何边框

        <table class="table table-bordered">
            <thead>
              <tr class="bg-info">
                <th>first name</th>
                <th>last name</th>
                <th>college</th>
                <th>department</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control"></td>
              </tr>
            </tbody>
          </table>

我想删除此空行，并使输入标签成为列的全尺寸？有可能吗，尝试实现这样的东西

bootstrap 4

谢谢..

Answer 1

只需删除每个单元格的默认填充和表单控件的默认边框

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* remove the padding of cell */
table.table tr td {
  padding:0;
}


/* remove the border of input */
input.form-control, input.form-control:focus {
  border:0;
  box-shadow:none;
}
</style>
</head>
<table class="table table-bordered">
  <thead>
    <tr class="bg-info">
      <th>first name</th>
      <th>last name</th>
      <th>college</th>
      <th>department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
    </tr>
  </tbody>
</table>

如何将输入标签用于 table - table td 全尺寸列

how to use input tag into table - table td full size of column

html

javascript

bootstrap-4