Нарисуйте круг или квадрат вокруг числа в ячейке таблицы

Question

Это немного сложно объяснить. Я работаю над созданием дисплеев для карт для игры в гольф. Когда отображается карта результатов, для значений, которые на 1 выстрел ниже номинала, должен быть круг вокруг числа, для значений, которые на 2 выстрела ниже, должен быть двойной круг. Для значений выше, то же самое с квадратами. Я решил эту проблему с фоновыми изображениями раньше для обычной игры удара, и это работало хорошо. Но новая задача - Match Play, потому что я должен использовать цвет фона ячейки, чтобы указать, какая команда выиграла определенную лунку, но в то же время мне нужно показать круги и квадраты. Мне не очень понравилось решение с фоновым изображением с самого начала, потому что оно недостаточно гибкое, чтобы вместить баллы выше 9, что встречается редко, но бывает, и тогда весь экран выходит за пределы выравнивания.

Я не совсем уверен, является ли это вопросом jQuery, вопросом HTML5 или общим вопросом HTML. Любые предложения очень ценятся.

Answer 1

Вы можете просто использовать border-radius.

<span style="display: inline-block; padding: 8px; border: 1px solid black;
    border-radius: 50%;" title="Birdie">3</span>

<span style="display: inline-block; padding: 8px; border: 3px double black;
    border-radius: 50%;" title="Eagle">2</span>

И для ударов по номиналу:

<span style="display: inline-block; padding: 8px;
    border: 1px solid black;" title="Bogey">5</span>

<span style="display: inline-block; padding: 8px;
    border: 3px double black;" title="Double Bogey">6</span>

Answer 2

Вы можете сделать это, окружив число <div class="birdie"> </div> и стилизовав div, чтобы иметь рамку с закругленными углами, например:

.birdie {
        width: 20px;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

Eagle почти такой же, но измените стиль рамки на double и ширину границы на 4px Это решение должно работать для всех основных браузеров. Выньте закругленные углы, чтобы обозначить призрак или двойник.