次の小さなカラーバーを作成してtdに含めるにはどうすればいいですか？

Question

次のカラーチャートを作成する方法を教えてください。個々のバーとスペーシングによって作成されます。使用する最良の方法は何ですか、私はそれをテーブルに挿入する必要があります。お知らせ下さい。

Answer 1

、CSSのフローティング機能を使用して、これらを作成することができます。

.chart { 
 
    display: block; 
 
} 
 

 
.bar { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 5px; 
 
    height: 10px; 
 
    background: #fff; 
 
    border: 1px solid #000; 
 
} 
 

 
.color-25 { 
 
    background: #bbb; 
 
} 
 

 
.color-50 { 
 
    background: #777; 
 
} 
 

 
.color-75 { 
 
    background: #333; 
 
} 
 

 
.color-100 { 
 
    background: #000; 
 
}

<div class="chart"> 
 
    <div class="bar color-100"></div> 
 
    <div class="bar color-100"></div> 
 
    <div class="bar color-100"></div> 
 
    <div class="bar color-75"></div> 
 
    <div class="bar color-75"></div> 
 
    <div class="bar color-50"></div> 
 
    <div class="bar color-25"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
    <div class="bar"></div> 
 
</div>

Answer 2

あなたは簡単に私は、これはあなたが持って欲しいものであると信じて例えば

.foo { 
 
    float: left; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
} 
 

 
.blue { 
 
    background: #13b4ff; 
 
} 
 

 
.purple { 
 
    background: #ab3fdd; 
 
} 
 

 
.wine { 
 
    background: #ae163e; 
 
}

<div class="foo blue"></div> 
 
<div class="foo purple"></div> 
 
<div class="foo wine"></div>