テーブルセル内の数字の周りに円または四角形を描く

Question

これは説明するのが少し難しいです。私はゴルフスコアカード用のディスプレイの作成に取り組んでいます。スコアカードが表示されている場合、1拍未満の値の場合は、数字の周りに円が表示されます.2桁低い値の場合は、2重円が表示されます。より高い値については、正方形と同じです。私は、通常のストロークプレーの前に、背景画像でこの問題を解決しました。うまくいきました。しかし、私がセルの背景色を使って特定のホールに勝ったチームを指定する必要があるので、新しい対戦はマッチプレーですが、同時に私はサークルとスクエアを表示する必要があります。まれにしか起こらない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%; 
    } 

イーグルはほとんど同じですが、ボーダースタイルをdoubleに変更し、ボーダー幅を4pxに変更しました。 この解決策は、すべてのメジャーブラウザ。ボギーやダブルボギーをマークするために丸いコーナーを取る。