Решил для себя сделать мини иконки для гитхаба типа "версия" или "в разработке". Сделал в виде таблиц, но мне не нравится то, что если ширина одного TD
изменится, то у остальных тоже (короче хочу переделать на div'ы, но никак). Расстояние - имеется ввиду расстояние между одной строкой и другой.
Код: https://jsfiddle.net/7cw0c57v/
* {
margin: 0;
padding: 0;
border-spacing: 0;
background: transparent;
background-color: transparent;
}
.VERSION_text {
background-color: #5b5b5b;
padding: 6px;
height: 20px;
width: 88px;
color: white;
text-align: center;
border-radius: 10px 0px 0px 10px;
}
.VERSION {
background-color: #5BC60E;
padding: 6px;
height: 20px;
width: 88px;
color: white;
text-align: center;
border-radius: 0px 10px 10px 0px;
}
.VERSION_2 {
background-color: #97C40E;
padding: 6px;
height: 20px;
width: 88px;
color: white;
text-align: center;
border-radius: 0px 10px 10px 0px;
}
.VERSION_3 {
background-color: #D1AE26;
padding: 6px;
height: 20px;
width: 88px;
color: white;
text-align: center;
border-radius: 0px 10px 10px 0px;
}
.VERSION_4 {
background-color: #ee8246;
padding: 6px;
height: 20px;
width: 88px;
color: white;
text-align: center;
border-radius: 0px 10px 10px 0px;
}
.VERSION_5 {
background-color: #D16450;
padding: 6px;
height: 20px;
width: 88px;
color: white;
text-align: center;
border-radius: 0px 10px 10px 0px;
}
.VERSION_6 {
background-color: #307ABD;
padding: 6px;
height: 20px;
width: 88px;
color: white;
text-align: center;
border-radius: 0px 10px 10px 0px;
}
.VERSION_7 {
background-color: #9C9C9C;
padding: 6px;
height: 20px;
width: 88px;
color: white;
text-align: center;
border-radius: 0px 10px 10px 0px;
}
tr {}
<table align="center" style="padding: 15px;">
<tr>
<td class="VERSION_text" valign="middle">VERSION</td>
<td class="VERSION" valign="middle">0.0.0.2v</td>
</tr>
<tr>
<td class="VERSION_text" valign="middle">VERSION</td>
<td class="VERSION_2" valign="middle">0.0.0.2v</td>
</tr>
<tr>
<td class="VERSION_text" valign="middle">VERSION</td>
<td class="VERSION_3" valign="middle">0.0.0.2v</td>
</tr>
<tr>
<td class="VERSION_text" valign="middle">VERSION</td>
<td class="VERSION_4" valign="middle">0.0.0.2v</td>
</tr>
<tr>
<td class="VERSION_text" valign="middle">VERSION</td>
<td class="VERSION_5" valign="middle">0.0.0.2v</td>
</tr>
<tr>
<td class="VERSION_text" valign="middle">VERSION</td>
<td class="VERSION_6" valign="middle">0.0.0.2v</td>
</tr>
<tr>
<td class="VERSION_text" valign="middle">VERSION</td>
<td class="VERSION_7" valign="middle">0.0.0.2v</td>
</tr>
</table>
(Кому нечем занятся: прошу переделать эту табличную фигню на нормальные div'ы)
border-spacing: 0;