Как этот поплавок влияет на граничный радиус моего td?

Question

У меня есть тд, который добавляет класс парения, когда я наведите курсор мыши над ней:

.hover{ 
    border: 1px solid #364861; 
    background: #5979a0 url(img.png) 50% 50% repeat-x; 
    font-weight: bold; 
    color: #ffffff; 
    border-radius: 10px; 
} 

По какой-то причине я не могу понять, атрибут границы не вступает в силу. Я случайно добавил

float: left; 

к классу, и теперь он работает ...

Это работает, так что я счастлив, но я не знаю, почему. Я не могу воссоздать проблему в скрипке, в моем DOM должен быть какой-то класс, который влияет на мой td. Но я просто не знаю, как float будет влиять на радиус границы элемента.

Я не знал, что эти атрибуты были связаны каким-либо образом.

Answer 1

Это потому, что td не может иметь border-radius. Когда вы даете ему float, он вырывается из его структуры таблицы и становится отдельным элементом, который имеет собственную структуру, поэтому вы увидите border-radius.

Я не вижу чехол для стола со скругленными углами. Так звучит likeyou злоупотребляют тегами table/td. Если это не данные таблицы, не помещайте ее в структуру table. Просто используйте div с закругленными углами.