1

Решил для себя сделать мини иконки для гитхаба типа "версия" или "в разработке". Сделал в виде таблиц, но мне не нравится то, что если ширина одного TD изменится, то у остальных тоже (короче хочу переделать на div'ы, но никак). Расстояние - имеется ввиду расстояние между одной строкой и другой.

Слипшиеся TR теги Код: 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'ы)

2
  • Убери border-spacing: 0;
    – Air
    5 фев 2018 в 21:54
  • Угу, только td "VERSION_text" и "VERSION_№" тоже раезжаются. Мне надо, чтоб между tr'ками было расстояние. 5 фев 2018 в 22:01

3 ответа 3

1

Правильно будет избавиться от таблицы и сверстать ее на флексах, тогда будут тебе доступны какие угодно отступы.

Но если охота поизвращяться, то на, но никому не рассказывай что это я посоветовал:

td {
 border: 10px solid white;
}
3
  • Не так вопрос задал. Мне надо, чтобы между TR'ками было расстояние. А флексы не кросбраузерны. 5 фев 2018 в 22:03
  • А что тебе мешает задать border-top: 1px solid white или border-bottom: 1px solid white?
    – Air
    5 фев 2018 в 22:18
  • Timoha_Timohavich, ты ошибаешься (caniuse.com/#search=flex). Пользуйся флексами и не делай таких извращений. Если ни в какую не хочешь флексы, делай сетку.
    – Profesor08
    6 фев 2018 в 3:03
1

border-spacing который вы свели к нулю отвечает как раз за расстояние между ячейками. Измените его на:

border-spacing: 0 10px;

и будет вам счастье.

1

Ответ уже дали.


BraFik says:

Так? Я добавил в начале кода

table{
      border-spacing:  0 11px;
    }

> 
>     		* { margin: 0; padding: 0; border-spacing: 0; background: transparent; background-color: transparent; }
> 
>     table{
>       border-spacing:  0 11px;
>     }
> 
>     		.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;
>     		}
>         
> 
> 
> 
>     <!DOCTYPE HTML>
>     <html>
>     	<head>
>     		<title></title>
>     	</head>
>     	<body>
>     		<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>
>     	</body>
>     </html>
> 
> 

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.