如何仅用HTML和Bootstrap实现仅内部带边框的表格？

当然可以实现！Bootstrap本身没有直接提供“仅内部边框”的表格类，但我们可以通过组合它自带的基础表格类和边框工具类来达成需求，完全不用写额外CSS。

核心思路是：先移除表格的整体外边框，再给单元格之间添加横向和纵向的分隔边框。具体实现步骤和代码示例如下：

代码示例 #

<table class="table border-0">
  <thead>
    <tr>
      <!-- 表头单元格：添加底部边框和右侧边框，最后一列去掉右侧边框 -->
      <th class="border-bottom border-end">产品名称</th>
      <th class="border-bottom border-end">单价</th>
      <th class="border-bottom">库存数量</th>
    </tr>
  </thead>
  <tbody>
    <!-- 非最后一行：单元格添加底部边框和右侧边框，最后一列去掉右侧边框 -->
    <tr>
      <td class="border-bottom border-end">笔记本电脑</td>
      <td class="border-bottom border-end">¥5999</td>
      <td class="border-bottom">12</td>
    </tr>
    <tr>
      <td class="border-bottom border-end">无线鼠标</td>
      <td class="border-bottom border-end">¥99</td>
      <td class="border-bottom">87</td>
    </tr>
    <!-- 最后一行：只给非最后一列添加右侧边框，去掉底部边框 -->
    <tr>
      <td class="border-end">机械键盘</td>
      <td class="border-end">¥399</td>
      <td>45</td>
    </tr>
  </tbody>
</table>

类作用说明 #

• table：加载Bootstrap的基础表格样式，保证单元格的内边距、文本对齐等基础布局正确
• border-0：移除表格本身的整体外边框，避免出现外层线条
• border-bottom：给表头行和tbody的非最后一行单元格添加底部边框，实现横向的内部分隔线
• border-end：给非最后一列的单元格添加右侧边框，实现纵向的内部分隔线

如果你的表格有更多行或列，只需要遵循两个规则：

• 最后一行的所有单元格都不要加border-bottom
• 每一行的最后一个单元格都不要加border-end

这样就能完美实现你想要的“仅内部带边框”的表格效果啦！

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