每个单元格和表格的边框答案

【问题标题】：Borders around every cell and table每个单元格和表格的边框
【发布时间】：2017-12-27 01:14:45
【问题描述】：

我的任务是维护别人的代码。在这个小提琴中，我从这个代码库中捕获了一个 html 文件的 sn-p

https://jsfiddle.net/hqkw4x1s/

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

我无法理解的是每个单元格和表格周围的边框。在 CSS 和 HTML 中都没有对边框样式的任何引用，那么边框是如何显示在每个单元格周围的。

我也尝试过使用开发者工具。它向我展示了以下关于边框的 CSS 类。但它是从哪里来的呢？

【问题讨论】：

如果不是实际边框，那么可能是box-shadow - Read more
其实你想要什么？你想要每个单元格的边框？
我只是想了解边框（或看起来像边框的线条）的来源。
检查我的答案

标签： html css

【解决方案1】：

您必须决定是要使用内联样式还是使用 CSS。这将更容易纠正和修复错误。

这似乎不是一个边界。它是一种背景颜色。两种背景颜色之间的对比显示为边框。 CSS 为每个单元格分配背景颜色。因此，单元格的外围将保持灰色，使其看起来像一个边框。

HTML 中的代码为表格提供背景颜色，而在 CSS 中，它为单元格提供背景颜色。每个单元格之间的小空间将显示表格的 bg 颜色，几乎是灰色的，导致查看者认为它是边框。

例如，通过从 CSS 中删除以下两行：

BACKGROUND-COLOR: #e6f6f6

BACKGROUND-COLOR: white

Table 标签中的这一行：

bgColor=#cecece

将呈现：

删除所有背景颜色后，根据需要将它们一一添加回来。还要注意我在spans 之一中注意到的内联样式，例如：

 <span style="BACKGROUND-COLOR: #f8f8f8" >

【讨论】：

【解决方案2】：

您需要一个新的表格 css 属性： “边界折叠”。

table {
  border-collapse: collapse;
}

【讨论】：

【解决方案3】：

由于这些属性，它似乎不是边框，而是表格的背景，穿过单元格之间的间隙：

bgColor=#cecece ... cellSpacing=1

（bgColor 使背景为浅灰色，cellSpacing 使单元格之间的间隙为 1px）。单元格有白色背景（使用 CSS 设置，通过.lab 和.val 类），但它们之间的空间有表格本身的背景，通过bgColor 属性设置。

【讨论】：