有同学咨询，网页中有一个table表格，这个table是通过编辑器添加的内容，但是在添加完成后，在前端页面table显示不正常，边框没有全部显示出来。经过检查，发现这是使用了Bootstrap（布特斯特拉普）牌CSS框架引起的问题。那么这个问题该怎么解决呢，今天丁老师教给大家。

问题故障
在使用Bootstrap（布特斯特拉普）牌CSS框架后，普通的table表格（非使用Bootstrap Tables类），无法正常显示边框。

具体情况为：
1.管理后台的编辑器创建table表格。

2.在前端页面中，table表格只显示外框边框，行和列的边框不显示，如图：

故障分析
经过分析发现，这是使用了Bootstrap的css后才出现的故障，在Bootstrap的_reboot.scss中，强制对table的tbody、tr、th、td等元素进行了定义，强制设置了border-width:0，如图：

Bootstrap的本意是，只有使用他自己的定义的table class类，才能显示出效果较好的table表格样式。如果不使用他的table class，则会被视为没有被定义class的table表格，就会显示异常。

比如Bootstrap关于table的class代码为：

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

故障解决
很简单，只要强制把Bootstrap的_reboot.scss中，对于tbody、tr、th、td设置的border-width，不要设置为0就可以了！在你自己的css中，对tbody, td, tfoot, th, thead, tr的border-width进行统一设置，可以设置为：

#默认初始化
border-width:initial;

#继承
border-width:inherit;

#细线
border-width:thin;

#中线
border-width:medium;

#粗线
border-width:thick;

#也可以设置为具体像素值
border-width:10px;

最终解决后的效果：