すべてのセルとテーブルの枠線

Question

私は他人のコードを管理することを任されています。このフィドルでは、私は私の頭を取得することはできませんよ事は周りの各セルの周囲に境界線である。このコードベースから

https://jsfiddle.net/hqkw4x1s/ 

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

 
.val { 
 
\t 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; 
 
\t \t \t \t \t \t <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ファイルのスニペットをキャプチャしていますテーブル。 CSSやHTMLには境界線スタイルの参照がありません。どのように境界線が各セルの周りに表示されるのでしょうか。

デベロッパーツールも使用してみました。それは私に境界線を参照して次のCSSクラスを示しています。しかし、それはどこから来ていますか？

Answer 1

あなたは、スタイルをインラインにしたいかCSS.Thatは、それが簡単にエラーを修正し、修正するようになります使用しているかどうかを決定する必要があります。

境界線ではないようです。それは背景色です。 2つのbg色のコントラストは境界線として表示されます。 CSSはすべてのセルに背景色を割り当てます。したがって、セルの外周は灰色のままで境界線のように見えます。

HTMLのコードは表にbg色を与え、CSSからbg色をセルに与えます。各セルの間の小さなスペースには、灰色に近い表bgの色が表示され、見る人に境界線と見なされるようになります。

BACKGROUND-COLOR: #e6f6f6 

BACKGROUND-COLOR: white 

テーブルタグからこのライン：

bgColor=#cecece 

をレンダリングする：

後、例えば、CSSから次の2行を除去することにより

すべての背景色を削除し、1つずつ元に戻しますあなたが必要とするものをd。 「国境崩壊」：あなたは、テーブルのための新しいCSSプロパティを必要とする

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

Answer 2

： はまた、私のようなspansのいずれかに気づいインラインスタイリングに注意してください。

table { 
    border-collapse: collapse; 
} 

Answer 3

原因でこれらの属性の、細胞間の隙間を通って来て、それは国境はないように見えるが、テーブルの背景：

bgColor=#cecece ... cellSpacing=1

を

（bgColorは明るい灰色の背景に、cellSpacingは細胞間に1pxの幅のギャップを作る）。セルは白い背景（CSSで.labと.valクラスを使用して設定されます）がありますが、それらの間にはbgColor属性で設定されたテーブル自体の背景があります。