如何为Bootstrap 4 Beta表格指定单元格添加左右边框？

嘿，我来帮你搞定这个问题！你之前的代码没生效主要有几个小细节没注意到：

• mx-0是用来设置左右外边距的，和边框完全没关系，这个类可以去掉；
• Bootstrap的border类默认是给元素添加全边框，但表格的table类默认是border-collapse: collapse，再加上你用了border-bottom-0，可能导致边框样式被表格的默认样式覆盖；
• 另外你引用的是Bootstrap 4 Alpha 6版本，不过这个版本的工具类逻辑和Beta差异不大，我们还是可以针对性解决。

下面是两种可行的解决方案：

方案1：自定义CSS类（推荐，优先级更高） #

我们可以写一个专门的类来控制单元格的左右边框，避免和Bootstrap默认样式冲突：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<style>
  /* 自定义单元格左右边框类 */
  .cell-left-right-border {
    border-left: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
    border-bottom: none !important;
  }
</style>

<table class="table">
  <tr>
    <td scope="col" class="white-text cell-left-right-border">Abc</td>
    <td>test</td>
  </tr>
</table>

方案2：使用Bootstrap内置工具类 #

如果不想写自定义CSS，也可以用Bootstrap的边框工具类组合，但要注意添加!important来确保优先级（因为表格默认样式可能会覆盖）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<table class="table">
  <tr>
    <td scope="col" class="white-text border-left border-right border-bottom-0 border-white" style="border-left:1px solid #fff !important; border-right:1px solid #fff !important; border-bottom:none !important;">Abc</td>
    <td>test</td>
  </tr>
</table>

额外提示 #

如果你的表格背景是白色的，白色边框会看不到，记得给表格或单元格设置深色背景哦！

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