css3 — Как сделать расстояние между тегами TR?

Задать вопрос

Вопрос задан

Изменён 5 лет 4 месяца назад

Просмотрен 3k раз

Решил для себя сделать мини иконки для гитхаба типа «версия» или «в разработке». Сделал в виде таблиц, но мне не нравится то, что если ширина одного 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">
  <tr>
    <td valign="middle">VERSION</td>
    <td valign="middle">0.0.0.2v</td>
  </tr>

  <tr>
    <td valign="middle">VERSION</td>
    <td valign="middle">0.0.0.2v</td>
  </tr>

  <tr>
    <td valign="middle">VERSION</td>
    <td valign="middle">0.
 
 0.0.2v</td>
  </tr>

  <tr>
    <td valign="middle">VERSION</td>
    <td valign="middle">0.0.0.2v</td>
  </tr>

  <tr>
    <td valign="middle">VERSION</td>
    <td valign="middle">0.0.0.2v</td>
  </tr>

  <tr>
    <td valign="middle">VERSION</td>
    <td valign="middle">0.0.0.2v</td>
  </tr>

  <tr>
    <td valign="middle">VERSION</td>
    <td valign="middle">0.0.0.2v</td>
  </tr>
</table>

(Кому нечем занятся: прошу переделать эту табличную фигню на нормальные div’ы)

  • css3
  • html5
2

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

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

td {
 border: 10px solid white;
}
3

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

border-spacing: 0 10px;

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

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

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">
>     			<tr>
>     				<td valign="middle">VERSION</td>
>     				<td valign="middle">0.
 
 0.0.2v</td>
>     			</tr>
> 
>     			<tr>
>     				<td valign="middle">VERSION</td>
>     				<td valign="middle">0.0.0.2v</td>
>     			</tr>
> 
>     			<tr>
>     				<td valign="middle">VERSION</td>
>     				<td valign="middle">0.0.0.2v</td>
>     			</tr>
> 
>     			<tr>
>     				<td valign="middle">VERSION</td>
>     				<td valign="middle">0.0.0.2v</td>
>     			</tr>
> 
>     			<tr>
>     				<td valign="middle">VERSION</td>
>     				<td valign="middle">0.0.0.2v</td>
>     			</tr>
> 
>     			<tr>
>     				<td valign="middle">VERSION</td>
>     				<td valign="middle">0.0.0.2v</td>
>     			</tr>
> 
>     			<tr>
>     				<td valign="middle">VERSION</td>
>     				<td valign="middle">0.
 
 
 0.0.2v</td>
>     			</tr>
>     		</table>
>     	</body>
>     </html>
> 
>

html — Как сделать расстояния между ячейками таблицы, чтобы при этом по краям этой таблицы отступов от ячеек не было?

Задать вопрос

Вопрос задан

Изменён 4 года 10 месяцев назад

Просмотрен 3k раз

Если задавать таблице border-spacing: 5px;, например, то отступы появляются не только внутри вокруг ячеек, но и по краям также появляются отступы. Как желательно без костылей сделать, чтобы по краям (отмечены красными стрелками) не было отступов?

Нужно вот-так:

  • html
  • css
  • таблицы

Как вариант — отрицательные поля, равные значению border-spacing.

table { 
    border-spacing: 10px;
    border-collapse: separate;
    margin: -10px;
}

td {
  padding: 1em;
  border: 1px solid;
}

body {
  margin: 0;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
1

https://jsfiddle.net/bc3zutny/19/

   <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-spacing</title>
  <style>
   table {
    border: 4px double #333; /* Рамка вокруг таблицы */ 
    border-collapse: separate; /* Способ отображения границы */ 
    width: 100%; /* Ширина таблицы */ 
    /*border-spacing: 50px 45px;  Расстояние между ячейками */ 
   }
   td {
    padding: 5px; /* Поля вокруг текста */ 
    border: 1px solid #a52a2a; /* Граница вокруг ячеек */ 
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>111111111</td>
    <td></td>
    <td>3333333</td>
   </tr>
   <tr>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td>111111111</td>
    <td></td>
    <td>3333333</td>
   </tr>
  </table>
 </body>
</html>
4

Это не таблица, но как вариант можно использовать.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  border: 1px solid lightgreen;
}

.grid__cell {
  border: 1px solid lightcoral;
}
<div>
  <div>1111111111111111</div>
  <div>2222222222222222</div>
  <div>3333333333333333</div>
  <div>4444444444444444</div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как добавить пробел между строками в таблице

Сегодняшняя задача — создать пробел между двумя строками в таблице. Пространство между двумя строками в

можно добавить с помощью свойств CSS border-spacing и border-collapse. Расстояние между границами Свойство используется для установки пробелов между ячейками таблицы, а свойство border-collapse указывает, свернута ли граница таблицы или нет. Свойство border-spacing можно использовать только в том случае, если для свойства border-collapse установлено значение «separate».

Давайте рассмотрим пример и покажем, как это сделать шаг за шагом.

  • Поместите тег
    в раздел.
  • Поместите теги

    и

    и напишите в них содержимое.

  • Поместите тег
и создайте таблицу.
  • Используйте тег
    • для каждой строки.
  • Для первой строки используйте тег
    • <тд>24
    • Используйте свойство border-collapse с его «отдельным» значением для таблицы.
    • Используйте свойство border-spacing, чтобы задать расстояние между границами соседних ячеек таблицы.
    • Для первой строки задайте цвет фона и цвет текста, используя свойства background-color и color.
    • Установите ширину и отступы строк.
    • Используйте свойство text-align со значением «center», которое выравнивает текст по центру.
    • Вы можете создать рамку вокруг ячеек таблицы, используя свойство границы и свойства границы-ширина, стиль границы и цвет границы.
    • Вы можете установить цвет элемента

      документа, используя цвет свойство. Кроме того, вы можете выбрать любой цвет из нашей палитры цветов. 

     таблица {
  граница-коллапс: раздельная;
  интервал между границами: 0 15 пикселей;
}

й {
  цвет фона: #4287f5;
  белый цвет;
}

й,
тд {
  ширина: 150 пикселей;
  выравнивание текста: по центру;
  граница: 1px сплошной черный;
  отступ: 5px;
}

h3 {
  цвет: #4287f5;
}

    Вот результат нашего кода.

    Пример добавления пробела между горизонтальными строками: 

     

  <голова>
    Название документа
    <стиль>
      стол {
        граница-коллапс: раздельная;
        интервал между границами: 0 15 пикселей;
      }
      й {
        цвет фона: #4287f5;
        белый цвет;
      }
      й,
      тд {
        ширина: 150 пикселей;
        выравнивание текста: по центру;
        граница: 1px сплошной черный;
        отступ: 5px;
      }
      h3 {
        цвет: #4287f5;
      }
    
  
  <тело>
    <дел>
       
    W3docs
     
       
    Интервал между строками в таблице
     
      <таблица>
    <тд>24

    Попробуй сам »

    Результат

    Расстояние между строками в таблице

    , определяющий ячейку заголовка в таблице HTML.
  • Для других строк используйте тег
    		• , определяющий стандартную ячейку данных в таблице HTML. Для ячеек, принадлежащих первой строке, установите класс «td».
     <тело>
  <дел>
     
    W3docs
     
     
    Интервал между строками в таблице
     
    <таблица>
    Идентификатор сотрудника Имя Пол Возраст
    10001 Том М 30
    10002 Салли Ф 28
    10003 Эмма Ф
    Идентификатор сотрудника Имя Пол Возраст
    10001 Том М 30
    10002 Салли Ф 28
    10003 Эмма Ф
    Код сотрудника Имя Пол Возраст
    10001 Том М 30
    10002 Салли Ф 28
    10003 Эмма Ф 24

    Пример добавления пробела между вертикальными столбцами: 

     

  <голова>
    Название документа
    <стиль>
      стол {
        граница-коллапс: раздельная;
        расстояние между границами: 20 пикселей 0;
      }
      й {
        цвет фона: #4287f5;
        белый цвет;
      }
      й,
      тд {
        ширина: 150 пикселей;
        выравнивание текста: по центру;
        граница: 1px сплошной черный;
        отступ: 5px;
      }
      h3 {
        цвет: #4287f5;
      }
    
  
  <тело>
    <дел>
       
    W3docs
     
       
    Интервал между строками в таблице
     
      <таблица>
        
          Идентификатор сотрудника
          Имя
          Пол
          Возраст
        
        
          10001
          Том
          М
          30
        
        
          10002
          Салли
          Ф
          28
        
        
          10003
          Эмма
          Ф
          <тд>24

    Попробуй сам »

    В нашем первом примере для свойства border-spacing мы используем значение «0 15px», что означает, что пространство находится между горизонтальными рядами. Во втором примере мы используем значение «20px 0», что означает, что пространство находится между вертикальными рядами.

    Проблема?!

    Давайте обратимся к нашей таблице, чтобы понять, о чем мы говорим, итак:

     таблица {
  граница-коллапс: раздельная;
  расстояние между границами: 20 пикселей 0;
  фон: хаки; /* добавить эту строку */
}

    И вот результат:

    Что, если мы хотим, чтобы в этом примере были удалены внутренние границы между столбцами? Теперь у нас есть это в открытом космосе из столбцов Employee ID и Age .

    Хорошо, давайте исправим это вместе!

    Удалите границы коллапса: отдельные и интервалы между границами: 20px 0 из таблицы CSS.

    Теперь мы добавим border-spacing: 20px 0 для каждого td нашей таблицы, а не для всей таблицы.

    Мы также должны добавить свойство отображения блока, чтобы он работал так, как мы хотим.

    Итак, наши изменения будут такими:

     таблица {
  фон: хаки;
}
таблица tbody {
  дисплей: блок;
  расстояние между границами: 20 пикселей 0;
}

    Результат будет таким же, как и раньше. Теперь пришло время удалить левое и правое внешнее граничное пространство. Это можно сделать быстро, просто добавив отрицательное поле слева и справа от каждого элемента td, чтобы убрать это пространство для нас.

     таблица {
  фон: хаки;
}
таблица tbody {
  поля: 0-20px; /* добавьте эту строку, отступ -20 пикселей слева и справа, 20 пикселей основаны на величине интервала между границами, который в этом примере равен 20 пикселям */
  дисплей: блок;
  расстояние между границами: 20 пикселей 0;
}

    И поехали! Это именно то, что мы хотели! Как видите, левое и правое космическое пространство ушли навсегда!

    Теперь вы можете удалить цвет фона и получить красивый стол!

    Надеюсь, вам понравилось, приятного времяпрепровождения!

    html — CSS: как создать разрыв между строками в таблице?

    спросил

    Изменено 10 месяцев назад

    Просмотрено 361 тысяч раз

    Это означает, что результирующая таблица выглядит менее похожей на эту:

    [===СТРОКА===]
[===СТРОКА===]
[===СТРОКА===]
[===СТРОКА===]

    . .. и еще вот так:

    [===СТРОКА===]
[===СТРОКА===]
[===СТРОКА===]
[===СТРОКА===]

    Я попытался добавить

     margin-bottom:1em;

    на оба тд и т.р. но ничего не получил. Есть идеи?

    • HTML
    • CSS
    5

    Все, что вам нужно:

     стол {
    граница-коллапс: раздельная;
    интервал между границами: 0 1em;
}

    Это предполагает, что вам нужен 1em вертикальный зазор, а не горизонтальный зазор. Если вы делаете это, вам, вероятно, также следует обратить внимание на управление высотой строки.

    Немного странно, что некоторые из ответов, которые люди дали, включают border-collapse: Collapse , эффект которого прямо противоположен тому, о чем задавался вопрос.

    4

     таблица {
    граница коллапса: коллапс;
}
тд {
    обивка сверху: .5em;
    заполнение снизу: .5em;
}

    Ячейки не будут реагировать ни на что, если вы сначала не установите свойство border-collapse. Вы также можете добавить границы к элементам TR, как только они будут установлены (среди прочего). себя вон. Я до сих пор активно использую таблицы в своих веб-приложениях для хранения данных.

    6

    Если ни один из других ответов не является удовлетворительным, вы всегда можете просто создать пустую строку и соответствующим образом оформить ее с помощью CSS, чтобы она была прозрачной.

    6

    Просто вы можете использовать набивка-верх и набивка-низ на элементе td .

    Блок может что-нибудь из этого списка:

    Код демонстрации: 

     тд
{
  отступы сверху: 10px;
  отступ снизу: 10 пикселей;
} 
     <таблица>
  
    Имя
    Фамилия
  
  
    Питер
    Гриффин
  
  
    Лоис
    Гриффин

    Если у вас нет границ или есть границы и вам нужен интервал внутри ячеек, вы можете использовать padding или высота строки . Насколько я знаю, margin не влияет на ячейки и строки.
    Свойство CSS для интервалов между ячейками — border-spacing , но оно не работает в IE6/7 (так что вы можете использовать его в зависимости от вашей группы).

    Если ничего не помогает, вы можете использовать старый атрибут Cellspacing в своей разметке, но это также даст вам расстояние между столбцами. Некоторые сбросы CSS предполагают, что вы все равно должны установить его, чтобы получить кросс-браузерную поддержку:

    /* таблицы по-прежнему нуждаются в Cellspacing="0" в разметке */

    Вот как (я думал, что это невозможно):

    Сначала задайте для таблицы только вертикальный интервал границ (например, 5 пикселей) и установите его горизонтальный интервал границ равным 0. Затем вы должны задать правильные границы для каждой ячейки строки . Например, самая правая ячейка в каждой строке должна иметь границу сверху, снизу и справа. Крайние левые ячейки должны иметь границу сверху, снизу и слева. А другие ячейки между этими двумя должны иметь границу только сверху и снизу. Как этот пример:

     <таблица>
    
        крайняя левая ячейка
        другая ячейка
        другая ячейка
        другая ячейка
        самая правая ячейка
    
    
        крайняя левая ячейка
        другая ячейка
        другая ячейка
        другая ячейка
        самая правая ячейка
    
    
        крайняя левая ячейка
        другая ячейка
        другая ячейка
        другая ячейка
        самая правая ячейка

    На мой взгляд, проще всего добавить отступы к вашему тегу.

     тд {
 отступ: 10px 0
}

    Надеюсь, это поможет вам! Радость!

    1

    заполнение в TD работает, если вы хотите, чтобы пространство имело тот же цвет фона, что и td

    в моем случае требовалось наличие пробела между строкой заголовка и тем, что было над ним

    путем применения этого стиля к одному ячейке, я смог получить желаемое разделение. Не обязательно было добавлять его во все ячейки… Возможно, не САМЫЙ элегантный, но, возможно, более элегантный, чем строки-разделители.

     <тд colspan="10">
    <дел
        >
            <%# Оценка("ИмяПоставщика")%>