包含引导程序时，使用背景颜色创建的边框会消失答案

【问题标题】：Borders created with background colors disappear when bootstrap included包含引导程序时，使用背景颜色创建的边框会消失
【发布时间】：2017-07-21 14:40:37
【问题描述】：

我有一个 HTML 表格，其中每个单元格都设置了背景颜色。结果，两种背景颜色之间的对比度显示为边界。请参考

处接受的解决方案

Borders around every cell and table

这是一个后续问题。

现在我需要在我的应用程序中包含引导程序。但是，一旦我包含引导 CSS，边框外观就会消失（即使我不包含任何引导类）。如何在包含引导程序的同时在每个单元格周围仍然有类似边框的外观。

这是包含引导程序的小提琴

https://jsfiddle.net/hqkw4x1s/1/

以下是原始代码，没有参考引导 css（由于 bgcolors，这会产生类似边框的外观）

.lab {
	HEIGHT: 18px; FONT-WEIGHT: normal; TEXT-ALIGN: left; PADDING-LEFT: 4px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #e6f6f6
}

.val {
	PADDING-BOTTOM: 1px; PADDING-TOP: 1px; PADDING-LEFT: 2px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: white
}

  <FORM>
           <DIV>
              <TABLE width="100%" bgColor=#cecece border=0 cellSpacing=1 cellPadding=0>
                 <TBODY>
                    <TR vAlign=middle>
                       <TD width="6%" class=lab>Country</TD>
                       <TD width="44%" class=val>
                          <INPUT name="A" id="A" type=checkbox CHECKED>
                          <LABEL for="A">A</LABEL>&nbsp;&nbsp; 
              <INPUT name="B" id="B" type=checkbox CHECKED>
                          <LABEL for="B">B</LABEL>

                       </TD>
                       <TD width="6%" class=lab>States</TD>
                       <TD width="44%" class=val>
                          <TABLE width="100%" border=0 cellSpacing=0 cellPadding=0>
                             <TBODY>
                                <TR>
                                   <TD>
                                      <SELECT>
                                         <OPTION value="p" selected>P</OPTION>
                                         <OPTION value="q">Q</OPTION>
                                         <OPTION value="r">R</OPTION>                                 
                                      </SELECT>
                                   </TD>                              
                                </TR>
                             </TBODY>
                          </TABLE>
                       </TD>
                    </TR>
                    <TR vAlign=middle>
                       <TD class=lab>Ownership</TD>
                       <TD class=val>
                          <TABLE width="100%" border=0 cellSpacing=0 cellPadding=0>
                             <TBODY>
                                <TR>
                                   <TD><TEXTAREA style="WIDTH: 95%" rows=1 cols=20></TEXTAREA></TD>
                                   <TD style="WIDTH: 75px; TEXT-ALIGN: left"><SPAN 
                                      style="BACKGROUND-COLOR: #f8f8f8"></SPAN> 
                                   </TD>
                                </TR>
                             </TBODY>
                          </TABLE>
                       </TD>
                       <TD class=lab>Partnership</TD>
                       <TD class=val><INPUT  type=text xHeight="32px"> </TD>
                    </TR>
                    <TR vAlign=middle>
                       <TD class=lab>Accounts Payable</TD>
                       <TD 
                          style="PADDING-LEFT: 2px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: white">
                          <INPUT type=text>
                       </TD>
                       <TD class=lab>Start Date</TD>
                       <TD class=val>

                          <INPUT type=text xHeight="32px"> 
                       </TD>
                    </TR>

                 </TBODY>
              </TABLE>
           </DIV>
        </FORM>

【问题讨论】：

以下答案是否适合您？

标签： html twitter-bootstrap css

【解决方案1】：

请更新下表标签。这里只需要使用引导标准类即可。

改为

<table width="100%" bgcolor="#cecece" border="0" cellspacing="1" cellpadding="0">

应该是：

<table class="table table-bordered" width="100%" bgcolor="#cecece" border="0" cellspacing="1" cellpadding="0">

【讨论】：