Bootstrap 4无边框表格：如何调整垂直内边距实现紧凑布局？

嘿，这个问题我做项目时也碰到过！Bootstrap 4默认的表格行内边距确实偏宽松，要实现更紧凑的布局，有几种实用的方法：

方法1：用Bootstrap内置的table-sm类 #

这是最省心的官方解决方案，table-sm类专门用来缩小表格内边距，它会把单元格默认的0.75rem内边距调整为0.3rem，直接加到table标签上就行：

<table class="table table-borderless table-sm">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
</table>

方法2：自定义CSS精准控制 #

如果table-sm的调整幅度还达不到你的需求，或者想要更个性化的内边距数值，可以自己写个自定义CSS类：

/* 自定义紧凑表格内边距 */
.table-custom-compact td, .table-custom-compact th {
  padding: 0.25rem 0.5rem; /* 上下0.25rem、左右0.5rem，可按需修改数值 */
}

然后把这个类加到表格上：

<table class="table table-borderless table-custom-compact">
  <!-- 表格内容 -->
</table>

方法3：用SCSS重写Bootstrap变量（适合用源文件的项目） #

如果你的项目基于Bootstrap的SCSS源文件开发，可以直接重写内置变量来全局调整表格内边距，这样所有表格都会生效：

// 引入Bootstrap前重写变量
$table-cell-padding: 0.25rem; // 替换默认的0.75rem
$table-cell-padding-sm: 0.15rem; // 想要更极致的紧凑效果，可同时调整sm版本变量

@import "bootstrap";

小提醒 #

调整内边距时记得平衡紧凑性和可读性，别把内边距设得太小，避免文字挤在一起影响用户体验哦！

内容的提问来源于stack exchange，提问作者Alexis Drakopoulos