Question

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

请参阅已接受的解决方案

Borders around every cell and table

这是一个跟进问题。

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

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

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

以下是原始代码，没有引用bootstrap css（由于bgcolors，这给出了类似边框的边框）

＆＃13;

.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
}

＆＃13;

  <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>

＆＃13;

Answer 1

请更新下面的表格标签。在这里你只需要使用bootstrap标准类来实现这一点。

<强>代替

<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">

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

1 个答案: