Borders Around Every Cell And Table

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/ The thing tha

Solution 1:

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

Solution 2:

You need a new css property for tables: "border-collapse".

table {
  border-collapse: collapse;
}

Solution 3:

It appears that it is not a border, but background of the table, coming through the gaps between cells, because of these attributes:

bgColor=#cecece ... cellSpacing=1

(bgColor makes light gray background, cellSpacing makes 1px wide gaps between cells). Cells have white background (set with CSS, via .lab and .val classes), but space between them has a background of the table itself, set via bgColor attribute.