Add all borders to the table with styles

We know that the boder that uses a table separately can only create a new and unique table with lines.

 

The style in table can be used to create different line styles, but only the line styles can be created.

 

The outermost border, rather than painting the lines inside

 

Here is a solution

 

<Style type = "text/CSS">
. Table_border TD
{
Border-top: 1px # DDD solid;
Border-Right: 1px # DDD solid;
Border-color: blue;
}
. Table_border
{
Border-bottom: 1px # DDD solid;
Border-left: 1px # DDD solid;
Border-color: blue;
Width: 100%
}
</Style>

 

As long as the table references class = "table_border", all squares in the table can be implemented.

 

Both can be wired, and the style can be customized.

 

However, there is a problem that the resulting line is not very well joined,

 

Many connections have a single port, so there is no gap between them,

 

It is best to use both of them together, as shown below:

 

Add in table

 

Bordercolor = "# cde0f5" cellspacing = "0" border = "1" cellpadding = "0"

 

Then write another style.

 

. Newtablestyle
{
Border-Right: # cde0f5 1px solid;
Border-top: # cde0f5 1px solid;
Border-left: # cde0f5 1px solid;
Border-bottom: # cde0f5 1px solid;
Border-collapse: collapse;
}

 

Add a class newtablestyle style to table.

 

In this way, you can add custom lines to the table,

 

Style is better than the original, and there will be no interface gaps

 

In this way, the style of some places is repeatedly defined, and the efficiency is not as high as the first one.

 

I prefer the second method.