Css расстояние между ячейками таблицы: border-spacing | htmlbook.ru

Leave a Comment / Css / By /

border-spacing — расстояние между ячейками

Поддержка браузерами

12.0+ 8.0+ 1.0+ 1.0+ 4.0+ 1.0+

Описание

CSS свойство border-spacing позволяет увеличивать или уменьшать расстояние между ячейками таблицы и общей рамкой таблицы.

По умолчанию браузеры обычно оставляют небольшое пустое пространство (2px) между смежными ячейками таблицы, и, чтобы увеличивать или уменьшать его, можно использовать свойство border-spacing. Значение этого свойства обычно задается в пикселях. Можно указать два значения, если нужно отдельно настроить горизонтальное и вертикальное расстояние.

Если для ячеек таблицы задана рамка, то в местах соприкосновения ячеек линия будет в 2 раза толще, чем по краям таблицы.

Чтобы предотвратить это, следует воспользоваться CSS свойством border-collapse.

Значение по умолчанию: 2px
Применяется: к table и inline-table элементам
Анимируется: да
Наследуется: да
Версия: CSS2
Синтаксис JavaScript: object.style.borderSpacing=»15px»

Синтаксис

border-spacing: расстояние|inherit;

Значения свойства

Значение Описание
расстояние Указывает расстояние между рамками смежных ячеек и общей рамкой таблицы в единицах измерения CSS.
  • Если указано только одно значение, оно определяет расстояние, как по вертикали так и по горизонтали.
  • Если указано два значения, первое устанавливает расстояние по горизонтали, второе по вертикале.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

border-spacing:

0px

1px

2px

5px

10px

50px

0px 50px

1px 5px

5px 1px

10px 0px

30px 50px

Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы

table#myTable {
border-spacing: 0px;
}

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

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

Вопрос задан

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

Просмотрен 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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — добавить пробел между ячейками (td) с помощью css

спросил

Изменено 2 года, 8 месяцев назад

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

Я пытаюсь добавить таблицу с пробелом между ячейками, поскольку цвет фона ячейки белый, а цвет фона таблицы синий, вы можете легко увидеть, что отступы и поля не работают (я применяю это к

td ), это только добавит пространство внутри ячейки.

  • HTML
  • CSS

1

Вы хотите между границами :

 <таблица>

Или где-нибудь в блоке CSS:

 таблица {
  интервал между границами: 10 пикселей;
}

См. quirksmode на border-spacing . Имейте в виду, что border-spacing не работает в IE7 и ниже.

1

 таблица {
  интервал между границами: 10 пикселей;
}

Это сработало для меня, когда я удалил

 border-collapse: отдельный;

из моего тега таблицы.

2

Мой:

 border-spacing: 10px;
граница-коллапс: раздельная;

1

Рассмотрите возможность использования атрибутов CellPacing и CellPadding для таблицы 9 . Тег 0012 или свойство CSS border-spacing .

Cellspacing (расстояние между ячейками) параметр тега TABLE — это именно то, что вам нужно. Недостатком является то, что это одно значение, используемое как для x, так и для y, вы не можете выбрать другой интервал или отступ по вертикали/горизонтально. Также есть свойство CSS, но оно широко не поддерживается.

Предположим, свойство cellpcing / cellpadding / border-spacing не сработало, вы можете использовать следующий код.

 <дел>
  <таблица ячеек = "2px">
    
      <тд>
        
      
  <тд>
      <тд>

Я пробовал и добился успеха, отделив кнопку с помощью ширины таблицы и сделав пустой td как 2 или 1%, он больше не возвращает.

Если вам нужны отдельные значения для сторон и верха и низа.

 <таблица>

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css - Как увеличить расстояние между столбцами таблицы в HTML?

спросил

Изменено 2 года, 11 месяцев назад

Просмотрено 203 тыс. раз

Допустим, я хочу создать однострочную таблицу с 50 пикселями между каждым столбцом и 10 пикселями отступа сверху и снизу.

Как мне это сделать в HTML/CSS?

  • HTML
  • CSS
  • HTML-таблица
  • прокладка

1

Подделка s не нужна. Вместо этого используйте border-spacing . Примените это так:

HTML: 

 
  CSS: 
 таблица {
  граница-коллапс: раздельная;
  расстояние между границами: 50 пикселей 0;
}
тд {
  отступ: 10px 0;
}
 
 Посмотреть  в действии  .
 2
 Установите ширину 

    <тд>
    
    <тд>
    
  Объяснение кода: 
 Первое правило CSS проверяет наличие пустых td и задает им ширину 50 пикселей, а второе правило задает отступы сверху и снизу для всех td.
 1
 Можно просто использовать отступы. Вот так:
 http://jsfiddle.net/davidja/KG8Kv/
  HTML 
 

  

    Первая колонка
    Вторая колонка
    Третья колонка
  


 
  s на  50px , а затем добавьте свой   + еще один поддельный  
 Fiddle.
 таблица тр td:пусто {
  ширина: 50 пикселей;
}
  
таблица тр тд {
  отступы сверху: 10px;
  отступ снизу: 10px;
} 
 <таблица>
  

    Первая колонкаВторая колонкаТретья колонка
  

 
  CSS 
 td {padding:10px 25px 10px 25px;}
 
 ИЛИ
 tr td:first-child {padding-left:0px;}
 тд {заполнение: 10px 0px 10px 50px;}
 
 Если я правильно понял, вам нужна эта скрипка.
 таблица {
  фон: серый;
}
тд {
  дисплей: блок;
  плыть налево;
  отступ: 10px 0;
  поле справа: 50px;
  фон: белый;
}
тд: последний ребенок {
  поле справа: 0;
} 
 <таблица>
  
 1
 Лучшим решением, чем выбранный ответ, было бы использование размера границы, а не расстояния между границами. Основная проблема с использованием border-spacing заключается в том, что даже первый столбец будет иметь интервал впереди.
 Например,
 таблица {
  граница-коллапс: раздельная;
  расстояние между границами: 80px 0;
}

тд {
  отступ: 10px 0;
} 
 <таблица>
  

    <тд>1
    
    <тд>3
  
  Чтобы избежать этого, используйте:  border-left: 100px сплошная #FFF;  и установите  border:0px  для первого столбца.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  
 

        

            элемент1
            элемент2
            элемент2
        

    
 

    Привет, HTML!
    Привет, CSS!
    Здравствуйте, JS!
  

 

    Первая колонка
    Вторая колонка
    Третья колонка
  

  
2