如何在表格中使用输入标签 - 表格 td 完整大小的列答案

【问题标题】：how to use input tag into table - table td full size of column如何在表格中使用输入标签 - 表格 td 完整大小的列
【发布时间】：2022-01-04 02:29:27
【问题描述】：

我正在尝试在表格中使用输入标签，而输入标签没有任何边框

        <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>

我想删除这个的空白行，并使输入标签的大小与列的大小一致？请问有没有可能，尝试实现这样的东西

引导程序 4

谢谢你..

【问题讨论】：

标签： javascript html bootstrap-4

【解决方案1】：

只需移除默认的 padding foreach 单元格和 form-control 的默认边框

<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>

【讨论】：