Set the outer border of the table

Question

The outer boundary in the code is indicated by a different color, but overlapped by the boundaries of the inner cells.

.sho_table-2 { border: 1px solid #2a2b33; border-collapse: collapse; } .sho_table-2 td { border: 1px solid #e9e9ea; line-height: 2em; } .sho_table-2 tr:hover { background: #edeeee; }

 <table class="sho_table-2"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;Производитель&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;Xiaomi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;Синхронизация с устройством&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;WiFi + Blootooth 4.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;Тип&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;Диагностические (SMART)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;Вес&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;1.9 кг&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> </table>

it is necessary that the external does not overlap.

zhurof zhurof 6.133 2 7 25 · Answer 1 · 2018-03-30T12:52:33

You can use the outline or border of greater thickness than the cells.

 .sho_table-2 { outline: 1px solid red; border-collapse: collapse; } .sho_table-2 td { border: 1px solid #e9e9ea; line-height: 2em; } .sho_table-2 tr:hover { background: #edeeee; }

 <table class="sho_table-2"> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;Производитель&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;Xiaomi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;Синхронизация с устройством&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;WiFi + Blootooth 4.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;Тип&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;Диагностические (SMART)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td>&nbsp;&nbsp;&nbsp;&nbsp;Вес&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;&nbsp;1.9 кг&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td> </tr> </table>

Set the outer border of the table

1 answer 1

More articles: