“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

This paper mainly discusses several implementation schemes of table single solid line border, as well as browser compatibility verification of each scheme (Chrome, Edge, Firefox, IE).

primers

The project wanted business forms to be filled out in a form that looked like the actual printed form, rather than the form style provided by front-end frameworks such as Element UI.

When using table to make a form, Chrome appears the table border thickness is different (IE under the normal performance), which leads to the topic of this article.

The problem back

The table is currently set to merge borders to a single border with the border-collapse: collapse property.

Border-collapse: Collapse causes this problem when used in conjunction with cell merge (colspan/rowspan). But in real tests, Chrome’s borders are still uneven, even without cell merging.

The Chrome development team has the following response to the bug report:

It’s a known (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn’t deal correctly with spanning cells (we only consider the cell adjoining the first row / column in a row / column span). On top of that, our border granularity is determined by the cell’s span. To fix this bug, we would need to overhaul our collapsing border code, which is a big undertaking.

Translation:

This is an old problem with table code. Merging borders is determined based on adjacent cells, and our code does not properly handle large span cells (currently we only consider cells of span 1 adjacent to the first row/column). Most importantly, our border granularity is determined by the span of the cell.

To fix this bug, we need to thoroughly examine the code associated with merging borders, which is a very difficult task.

Since Chrome hasn’t fixed this problem, we’ll have to look at other implementations of single solid borders.

Single solid line frame implementation scheme comparison

There are 3.5 ways to implement a single solid border, including the (tolerable) solutions that are problematic on Chrome (0.5 means one solution is unacceptable and will be used as a negative case).

Each solution will be tested on the four major browsers, with the following browser types and versions:

The browser	The version number
Google Chrome	97.0.4692.71
Microsoft Edge	97.0.1072.62
Microsoft Internet Explorer	11.0.19041.1202
Mozilla Firefox	96.0.1

Plan 1

• Table set to border merge mode (border-collapse: collapse)
• Cells are set to full borders

table {
    border-collapse: collapse;
}
th.td {
    border: 1px solid # 868686;
}
Copy the code

This solution is the most reasonable from a semantic and logical point of view, unfortunately, Chrome and Edge will have different border thickness issues (IE and Firefox do not have a problem).

Option 2 (Recommended)

• Table in default border split mode (border-collapse: separate), set the border spacing to 0
• For all cells, add a right border and a lower border only
• Table adds a left border and an upper border to fill in the missing border of the cell

table {
    border-collapse: separate; /* default */
    border-spacing: 0; 
    border-top: 1px solid # 868686; 
    border-left: 1px solid # 868686;
}
th.td {
    border-right: 1px solid # 868686; 
    border-bottom: 1px solid # 868686;
}
Copy the code

The core idea of this solution is to draw only a single border anywhere, ensuring that there is no merging of borders. It’s not logically straightforward, but it does solve the problem and works perfectly in Chrome, Edge, Internet Explorer, and Firefox.

Plan 3

• Table in default border split mode (border-collapse: separate), set the border spacing to 1px
• Instead of adding the actual border, set different background colors for table and cell, and form the border effect through the difference of background colors

table {
    border-collapse: separate; /* default */
    border-spacing: 1px;
    background-color: # 868686; 
}
th.td {
    background-color: #ffffff;
}
Copy the code

This scheme is a bit of a wild card, trying to create a fake border by leaving 1px space between the cells and setting the background color. From the perspective of thinking, it seems that there is no big problem, but the actual test is not satisfactory. The compatibility of the browser is just the opposite to plan 1. There will be a problem of different border thickness in IE and Firefox, while Chrome and Edge have no problem.

Scenario 3.5 (this is a negative example!)

• Table in default border split mode (border-collapse: separate), set the border spacing to 0
• Table and cell are set with full border

table {
    border-collapse: separate; /* default */
    border-spacing: 0; 
    border: 1px solid # 868686;
}
th.td {
    border: 1px solid # 868686;
}
Copy the code

This solution considers that, without border merging, the two adjacent borders look like a single bold border because there is no margin set. Not to mention the experience of bold display is not very good, the biggest drawback of this scheme is that table under different width Settings, in various browsers may appear table border and cell border spacing problem (using the browser’s zoom function, this problem is very easy to repeat).

conclusion

The compatibility of the above three schemes to achieve the single solid line border of table in different browsers is summarized as follows:

The browser	The version number	Collapse 1	Scheme 2: Draw only a single border	Scheme 3: background color false border
Google Chrome	97.0.4692.71	x	Square root	Square root
Microsoft Edge	97.0.1072.62	x	Square root	Square root
Microsoft Internet Explorer	11.0.19041.1202	Square root	Square root	x
Mozilla Firefox	96.0.1	Square root	Square root	x

To sum up, plan 2 is recommended. Options 1 and 3 are also available with a certain degree of tolerance.