Задать внешнюю границу таблицы

211

31 марта 2018, 14:24

Внешняя граница в коде указана другим цветом, но перекрывается границами внутренних ячеек.

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

нужно, чтобы внешняя не перекрывалась.

Answer 1

Можно использовать outline или границу большей толщины, чем у ячеек.

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как изменить стили :before непосредственно в атрибуте style=“”?

Здравствуйте, допустим есть ссылка:

160

CSS

Как сделать меню как на скрине? [требует правки]

152

MySQL

Помогите построить правильно MySQL запрос

Ссылка на задание https://sqltestnet/#192840 Нужно добиться объединения внутри group_concat (либо иначе, любым методом) по order_id и слепить их суммы

223

MySQL

MySql округление

Всем привет, помогите создать запросОкруглить число в таблице, например 1287->1290, 1423->1420, заранее спасибо!

191