Html cellspacing table: Атрибут cellspacing | htmlbook.ru

Leave a Comment / Html / By /

css — Расстояние между ячейками таблицы HTML — только между ячейками, без внешних

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

спросил

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

Просмотрено 4к раз

Я пытаюсь добавить интервал между ячейками в html-таблицу.

Я хочу добавить интервал между ячейками без внешнего интервала.

Моя проблема в том, что HTML-атрибут Cellspacing и CSS-свойство border-spacing также добавляют отступ снаружи.

Я хотел бы поставить интервал между ячейками без красной (внешней) части — только желтую.

Возможно ли это?

Редактировать:

  1. Изображение нарисовано вручную (MS-Paint) только для иллюстрации.
  2. Раскрашивание для отладки — чтобы было видно где границы и интервалы.

Я нашел обходное решение, включающее некоторые дополнительные div -s:

 .inner-spacing {
  граница коллапса: коллапс;
  цвет фона: желтый;
  граница: 2px сплошной черный;
}
.inner-spacing td {
  заполнение: 0;
}
.inner-spacing td > div {
  ширина: 60 ​​пикселей;
  высота: 60 ​​пикселей;
  цвет фона: зеленый;
  граница: 2px сплошной черный;
  поле: 10 пикселей;
}
.inner-spacing tr:first-child > td > div {
  поле сверху: 0px;
}
.inner-spacing tr: last-child > td > div {
  нижняя граница: 0px;
}
.inner-spacing tr > td: first-child > div {
  поле слева: 0px;
}
.inner-spacing tr > td: last-child > div {
  поле справа: 0px;
} 
 <таблица>
  
    <тд>
      <дел/>
    
    <тд>
      <дел/>
    
  
  
    <тд>
      <дел/>
    
    <тд>
      <дел/>

Итак, подводя итог, я хотел бы, чтобы таблица имела интервалы между границами, при этом граница таблицы схлопывалась на ячейки (без интервалов).

Интересно, есть ли какие-то другие решения — так что любое новое решение приветствуется!

  • HTML
  • CSS

4

Это будет немного сложно… вам нужно установить display:block и border-spacing:10px для расстояния между ячейками и такое же отрицательное margin:-10px для удаления внешнего интервала

Фрагмент стека 

 таблица {
  шрифт: жирный 13px Verdana;
  фон: черный;
  поле: 30px авто;
  интервал между границами: 0;
}

таблица тд {
  отступ: 30 пикселей;
  фон: красный;
  цвет: #fff;
}

таблица tbody {
  поле: -10px;
  дисплей: блок;
  интервал между границами: 10 пикселей;
} 
 <таблица>
  
    <тд>1
    
 
2
  
  
    <тд>3
    <тд>4

Это довольно сложно, вам нужно выполнить что-то вроде этого:

 table, td {border: 1px solid #999; граница коллапса: коллапс;}
таблица {маржа: -5px;}
таблица тд {ширина: 32px; высота: 32 пикселя; поле: 5 пикселей;} 
 <таблица>
  
    <тд>
    <тд>
  
  
    <тд>
    <тд>

6

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

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

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

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

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

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

Обязательно, но не отображается

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

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

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

Как установить Cellpadding и Cellspacing в CSS

Тег

имеет атрибуты cellpadding и Cellspacing, которые не поддерживаются в HTML5, поэтому вместо этого рекомендуется использовать свойства CSS padding и border-spacing.

Итак, альтернатива CSS для ячейки будет:

 td,
й {
  отступ: 10 пикселей;
}

Альтернативой CSS для ячейки может быть:

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

Давайте посмотрим, как их использовать шаг за шагом:

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

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

  1. Добавьте свойство заполнения к элементам

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

  1. Для установки интервала между ячейками определите свойство border-spacing для элемента
,
.
  • Стиль таблицы с использованием свойства border-collapse. Установите значение «разделить».

    • Обратите внимание, что значение «разделение» устанавливается по умолчанию при определении свойства границы.

    Пример создания таблицы: 

     

  <голова>
    Название документа
    <стиль>
      стол,
      тд,
      й {
        граница: 1px сплошной черный;
        граница-коллапс: раздельная;
      }
    
  
  <тело>
     
    Пример разделения границ
     
    <таблица>
    Заголовок Заголовок
    Некоторый текст Некоторый текст
    Некоторый текст Некоторый текст
    и для определения заполнения ячеек.

    Пример добавления ячейки со свойством padding: 

     

  <голова>
    Название документа
    <стиль>
      стол,
      тд,
      й {
        граница: 1px сплошной черный;
        граница-коллапс: раздельная;
      }
      тд,
      й {
        отступ: 5px 10px;
      }
    
  
  <тело>
     
    Пример разделения границ
     
    <таблица>
    Заголовок Заголовок
    Некоторый текст Некоторый текст
    Некоторый текст Некоторый текст
    .

    Пример установки cellspacing со свойством border-spacing: 

     

  <голова>
    <center><div class="advv"><ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center><center><div class="advv"><ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center>Название документа
    <стиль>
      стол {
        интервал между границами: 10 пикселей;
      }
      стол,
      тд,
      й {
        граница: 1px сплошной черный;
        граница-коллапс: раздельная;
      }
      тд,
      й {
        отступ: 10 пикселей;
      }
    
  
  <тело>
     
    Пример интервала между ячейками
     
    <таблица>

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

    1. Стилизуйте элементы
    Заголовок Заголовок
    Некоторый текст Некоторый текст
    Некоторый текст Некоторый текст
    , и
    ,
    и при необходимости задайте свойства color, background-color и text-align.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *