Bootstrap4中表格td内input如何占满列宽并去除边框与空白

开发者阿泽

2026-9-24

Bootstrap4 表格input样式调整方案

该需求完全可以实现，核心是覆盖Bootstrap自带的默认td内边距、input边框样式规则，具体实现方案如下：

问题根源
现有样式的间距和边框来自两个默认配置：
1. .table类默认给<td>设置了内边距
2. .form-control类默认给input设置了边框、圆角、默认边距
方案一：使用Bootstrap自带工具类（无需额外编写CSS）
直接在现有标签上添加Bootstrap4内置工具类即可实现效果，修改后代码如下：

<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 class="p-0"><input type="text" class="form-control border-0 w-100 rounded-0"></td>
      <td class="p-0"><input type="text" class="form-control border-0 w-100 rounded-0"></td>
      <td class="p-0"><input type="text" class="form-control border-0 w-100 rounded-0"></td>
      <td class="p-0"><input type="text" class="form-control border-0 w-100 rounded-0"></td>
    </tr>
  </tbody>
</table>

用到的工具类说明：

p-0：清除td的所有内边距
border-0：去掉input的默认边框
w-100：设置input宽度为100%，占满父容器
rounded-0：去掉input的默认圆角
方案二：自定义CSS（适合批量全局生效）
如果项目中多处需要该效果，可添加自定义样式统一处理：

/* 清除表格td内边距 */
.table.table-bordered td {
  padding: 0 !important;
}
/* 重置input样式 */
.table.table-bordered td .form-control {
  border: none !important;
  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important; /* 清除聚焦时的默认阴影 */
}
/* 可选：自定义聚焦交互样式，避免无操作反馈 */
.table.table-bordered td .form-control:focus {
  border-bottom: 1px solid #80bdff !important;
}