我的任务是维护别人的代码。在这个小提琴中,我从这个代码库中捕获了一个html文件片段
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>
<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中有任何对边框样式的引用,那么为什么在每个单元格周围显示边框。
我也尝试过使用开发者工具。它向我展示了以下参考border的CSS类。但它来自哪里?
答案 0 :(得分:1)
您必须决定是否要内联样式或使用CSS。这样可以更容易地纠正和修复错误。
似乎不是边界。这是一种背景色。两种bg颜色之间的对比度显示为边框。 CSS为每个单元格指定背景颜色。因此,细胞的外围将保持灰色,使其看起来像边界。
HTML中的代码为表格提供了bg颜色,而CSS则为单元格提供了bg颜色。每个单元格之间的小空间将显示表格bg颜色,几乎是灰色,引导观众认为它的边界。
例如,从CSS中删除以下两行:
BACKGROUND-COLOR: #e6f6f6
BACKGROUND-COLOR: white
Table标签中的这一行:
bgColor=#cecece
将呈现:
删除所有背景颜色后,根据需要逐个添加。
还要注意我在其中一个spans
中注意到的内联样式,例如:
<span style="BACKGROUND-COLOR: #f8f8f8" >
答案 1 :(得分:0)
您需要表的新css属性: &#34;边界崩溃&#34;
table {
border-collapse: collapse;
}
答案 2 :(得分:0)
由于这些属性,它似乎不是边框,而是表格的背景,通过单元格之间的间隙:
bgColor=#cecece
...cellSpacing=1
(bgColor
使浅灰色背景,cellSpacing
在单元格之间产生1px宽的间隙)。单元格具有白色背景(通过CSS设置,通过.lab
和.val
类),但它们之间的空格具有表格本身的背景,通过bgColor
属性设置。