每个单元格和表格边框 [英] Borders around every cell and table
问题描述
https://jsfiddle.net/hqkw4x1s/
。实验室{HEIGHT：18px;字体重量：正常; TEXT-ALIGN：left; PADDING-LEFT：4px; PADDING-RIGHT：3px;背景颜色：＃e6f6f6} .val {PADDING-BOTTOM：1px; PADDING-TOP：1px; PADDING-LEFT：2px; PADDING-RIGHT：3px; <-c $ c>< 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 =Aid =Atype = checkbox CHECKED> < LABEL for =A> A< / LABEL>& nbsp;& nbsp; < INPUT name =Bid =Btype = 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值=p选择> P< / OPTION> < OPTION值=q> Q< / OPTION> < OPTION值=r> R< / OPTION> < / SELECT> < / TD> < / TR> < / TBODY> < /表> < / TD> < / TR> < TR vAlign = middle> < TD class = lab>所有权< / TD> < TD class = val> < TABLE width =100％border = 0 cellSpacing = 0 cellPadding = 0> < TBODY> < TR> < TD>< / TEXTAREA>< / TD>< TEXTAREA style =WIDTH：95％rows = 1 cols = 20>< < TD style =WIDTH：75px; TEXT-ALIGN：left>< SPAN style =BACKGROUND-COLOR：＃f8f8f8>< / SPAN> < / TD> < / TR> < / TBODY> < /表> < / TD> < TD class = lab> Partnership< / TD> < TD class = val>< INPUT type = text xHeight =32px> < / TD> < / TR> < TR vAlign = middle> < TD class = lab>应付帐款< / TD> < TD style =PADDING-LEFT：2px; PADDING-RIGHT：3px; BACKGROUND-COLOR：white> < INPUT type = text> < / TD> < TD class = lab>开始日期< / TD> < TD class = val> < INPUT type = text xHeight =32px> < / TD> < / TR> < / TBODY> < /表> < / DIV> < / FORM>
我无法让我的头在每个细胞和桌子周围。无论是在CSS中，还是在HTML中，都没有提及边框样式，那么在每个单元格周围如何显示边框。
我也尝试过使用开发者工具。它向我展示了以下参考边界的CSS类。但它来自哪里？
您必须决定是要内嵌样式还是使用CSS。这将更容易纠正和修复错误。
看起来这不是边界。这是一种背景颜色。两个bg颜色之间的对比显示为边框。 CSS为每个单元格分配一个背景颜色。因此，细胞外围将保持灰色，使其看起来像一个边界。
HTML中的代码为表格提供了bg颜色，而从CSS中为bg提供了颜色。每个单元之间的小空间将显示表bg颜色，这几乎是灰色的，导致观看者认为它是边框。
例如，通过从CSS中删除以下两行：
背景颜色：＃e6f6f6
背景颜色：白色
来自Table标签的行：
bgColor =＃cecece
将呈现：
删除所有背景颜色后，根据需要逐个添加它们。
还要注意我在跨度之一中注意到的内联样式，比如：
< span style =BACKGROUND-COLOR：＃f8f8f8>
I have been tasked with maintaining someone else's code. In this fiddle, I have captured a snippet of an html file from this codebase
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>
The thing that I am not able to get my head around is the border around each cell and the table. Neither in the CSS, nor in the HTML there is any reference to border style, so how come borders are displayed around each cell.
I tried using developer tools as well. It shows me the following CSS class with reference to border. But where is it coming from?
You have to decide whether you want to style inline or using CSS.That will make it easier to correct and fix errors.
It seems that is not a border. It's a background color. The contrast between two bg colors appears as a border. The CSS assigns a background color to every cell. Hence, the outer surrounding of the cell will remain gray making it look like a border.
The code in HTML gives a bg color to the table and from CSS it gives bg color to cells. The little space between each cell will show the tables bg color, which is nearly gray, leading the viewer to think it's border.
For example, by removing the following two lines from CSS:
BACKGROUND-COLOR: #e6f6f6
BACKGROUND-COLOR: white
This line from the Table tag:
bgColor=#cecece
Will render:
After you remove all background colors, add them back one by one based on what you need.
Also be aware of the inline styling I noticed in one of the spans such as:
<span style="BACKGROUND-COLOR: #f8f8f8" >
这篇关于每个单元格和表格边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
