How to delete border spacing in table
I put a black background to «th». Now the 1 and 2 cells have some kind of border between/separating them. I had a look in source code and I think I found something:
This CSS code is listed in source code as «user agent stylesheettable» and I couldn’t enable/disable it to test if this is the problem, but I tried and added the same code but with «none» and «0» parameters but it didn’t help neither.
Can somebody help and guide me where is the border from please?
5 Answers 5
Your table be like below by default and set the css rules on tables ID or Class
Set a CSS rule on your table:
You can visit this jsFiddle example and switch the border-collapse property from collapse to separate to see how it changes the table’s layout. The border-collapse property can only be collapse, separate, or inherited.
border-collapse: none is invalid. Try border-collapse: collapse .
you can use border collapse. The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.
border-spacing
The border-spacing CSS property sets the distance between the borders of adjacent cells in a <table> . This property applies only when border-collapse is separate .
Try it
The border-spacing value is also used along the outside edge of the table, where the distance between the table’s border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.
Note: The border-spacing property is equivalent to the deprecated cellspacing attribute of the <table> element, except that border-spacing has an optional second value that can be used to set different horizontal and vertical spacing.
Syntax
The border-spacing property may be specified as either one or two values.
- When one <length> value is specified, it defines both the horizontal and vertical spacings between cells.
- When two <length> values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
Values
The size of the spacing as a fixed value.
Formal definition
| Initial value | 0 |
|---|---|
| Applies to | table and inline-table elements |
| Inherited | yes |
| Computed value | two absolute lengths |
| Animation type | discrete |
Formal syntax
Examples
Spacing and padding table cells
This example applies a spacing of .5em vertically and 1em horizontally between a table’s cells. Note how, along its outside edges, the table’s padding values are added to its border-spacing values.
Как убрать расстояние между ячейками таблицы с помощью CSS.
Продолжаем заметку о создании границ для таблиц и настройке их отображения с помощью CSS.
В прошлой заметке мы остановились на том, что у нас получилась вот такая таблица.
Проблема была в том, что у этой таблицы имеется большое расстояние между ячейками. Очень желательно было бы это расстояние убрать.
Сейчас я покажу очень простую технику, которая позволит решить эту проблему.
border — spacing
Свойство для управления расстоянием между рамками ячеек таблицы.
Время чтения: меньше 5 мин
- Кратко
- Пример
- Как пишется
- Как понять
Обновлено 8 ноября 2022
Кратко
Скопировать ссылку на секцию «Кратко» Скопировано
Свойство border — spacing задаёт отступ между рамками ячеек таблицы.
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
Разрешается указывать одно или два неотрицательных значения:
- border — spacing : 1px — расстояние между ячейками со всех сторон одинаковое.
- border — spacing : 1px 2px — первое значение задаёт расстояние между ячейками по горизонтали, второе — по вертикали.
Как понять
Скопировать ссылку на секцию «Как понять» Скопировано
Свойство border — spacing задаёт расстояние между ячейками таблицы. Это свойство работает только для таблиц со свойством border — collapse в значении separate .
Отступ также будет появляться вокруг таблицы, поэтому расстояние между ячейками таблицы и её рамкой будет складываться из значений border — spacing и padding таблицы.