CSS Tables Borders — Apprentice.MN
Агуулга
- Table Borders
- Full-Width Table
- Double Borders
- Collapse Table Borders
- Let the borders collapse
The look of an HTML table can be greatly improved with CSS:
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Königlich Essen Philip Cramer Germany Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy North/South Simon Crowther UK Paris spécialités Marie Bertrand France
Table Borders #
To specify table borders in CSS, use the border
property.
The example below specifies a black border for <table>, <th>, and <td> elements:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
table, th, td {
border: 1px solid black;
}
Full-Width Table #
The table above might seem small in some cases. If you need a table that should span the entire screen (full-width), add width: 100%
to the <table> element:
>
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
table {
width: 100%;
}
Double Borders #
Notice that the table in the examples above have double borders. This is because both the table and the <th> and <td> elements have separate borders.
To remove double borders, take a look at the example below.
Collapse Table Borders #
The border-collapse
property sets whether the table borders should be collapsed into a single border:
Let the borders collapse #
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
table {
border-collapse: collapse;
}
If you only want a border around the table, only specify the border
property for <table>:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois |
table {
border: 1px solid black;
}
What are your Feelings
Бид яаж туслах вэ?
Name: *
Email: *
Message: *
Updated on 05/08/2021
Powered by BetterDocs
Office Open XML (OOXML) — обработка текстов
Конфликты границ таблицы
Если в таблице или строке таблицы (исключение на уровне таблицы) указана граница, а в отдельных ячейках также указаны границы, возможен конфликт. Спецификация OOXML указывает, как должны разрешаться такие конфликты.
Прежде всего обратите внимание, что если расстояние между ячейками не равно нулю, то и граница ячейки, и граница таблицы могут отображаться без конфликтов.
Word 2007 Пример:
Конфликты между границами ячеек и границами таблиц и исключений на уровне таблиц
Если расстояние между ячейками равно нулю, возникает конфликт. Следующие правила применяются в отношении границ ячеек и границ таблицы и исключений (строки) на уровне таблицы:
- Если есть граница ячейки, то отображается граница ячейки.
- Если граница ячейки отсутствует, но в строке есть граница исключения на уровне таблицы, то отображается эта граница исключения на уровне таблицы.
- Если граница исключения на уровне ячейки или таблицы отсутствует, отображается граница таблицы.
Ссылка: ECMA-376, 3-е издание (июнь 2011 г. ), Справочник по основам и языку разметки, § 17.4.40.
Конфликты между соседними ячейками
Конфликты между границами соседних ячеек разрешаются путем присвоения веса каждой из них в соответствии с их стилем; преобладает граница ячейки с наибольшим весом. Если веса равны, то границы сравниваются по значениям яркости; граница с меньшим значением яркости выигрывает. Если коэффициенты яркости равны, то отображается первая граница в порядке чтения.
Ссылка: ECMA-376, 3-е издание (июнь 2011 г.), Справочник по основам и языку разметки, § 17.4.67.
Связанное свойство CSS:
Если границы не свернуты и между ячейками имеется достаточное расстояние, конфликт между границами отсутствует. (Обратите внимание, что строки HTML не могут иметь границ — только таблицы и ячейки.)
<таблица>
. . .
. . .
Пример CSS:
ААА | ВВВ | ССС |
ЕЕЕ | ФФФ | ДДД |
<таблица>
. . .
Пример CSS:
ААА | ВВВ | ССС |
ЕЕЕ | ФФФ | ДДД |
Поместить границу вокруг таблицы и определенных строк и столбцов — HTML и CSS — Форумы SitePoint 2 октября 2020 г., 17:14
#1
Здравствуйте, у меня есть таблица со строками и столбцами. Мне нужно, чтобы у таблицы была граница и информация о группе a11, b44, c77 и a22, b55, c88 и т. д., поэтому каждая группа также имеет свою границу. Как лучше всего это сделать? Если это что-то кроме стола, я готов к этому. Окончательный результат, который мне нужен, — это иметь 3 столбца и 12 строк с внешней границей и 1 столбец/3 строки, чтобы иметь собственную границу. Как я мог это сделать?
Что у меня есть в качестве примера:
a11 | а22 | а33 |
б44 | б55 | б66 |
с77 | с88 | с99 |
д11 | д22 | д33 |
е44 | е55 | е66 |
ф77 | ф88 | ф99 |
СамА74
#2
Вы имеете в виду границу каждой из этих отдельных ячеек или одну границу, окружающую все эти ячейки?
твист
#3
Граница вокруг таблицы и группы ячеек, т.е. область с информацией a11, b44, c77 будет иметь границу вокруг нее с окружающей таблицей. Не знаю, можно ли сделать с таблицами.
ПолОБ
#4
Вы можете сделать что-то вроде этого , но это немного запутанно , и я не вижу корреляции для табличных данных как таковых, что означает, что прямая flexbox или даже css-сетка были бы лучшим выбором, чем табличный элемент.
Мне пришлось изменить таблицу на display:flex, чтобы переместить границы, поскольку вы не можете сделать это в таблице (если, возможно, вы не использовали вложенные таблицы).
Это также могло бы быть намного проще, если бы были добавлены соответствующие классы.
головка
#5
Привет, twistcf,
вот очень простой и простой пример…
<голова> <мета-кодировка="utf-8">Документ без названия <стиль медиа="экран"> тело { цвет фона: #f0f0f0; шрифт: обычный 1em / 1.5em без засечек; } дел { дисплей: встроенный блок; набивка: 0,25 см; граница: 1px сплошная #000; цвет фона: #fff; } стол { граница: 1px сплошная #000; граница коллапса: коллапс; } тд { набивка: 0,5 см; } tr td:nth-child(1) { цвет фона: #плата; } tr td:nth-child(2) { граница справа: 1px сплошная #000; граница слева: 1px сплошная #000; цвет фона: #fef; } tr td:nth-child(3) { цвет фона: #eef; } <тело> <дел> <таблица> <тело>a11 a22 a33 b44 b55 b66 c77 c88 c99 d11 d22 d33 e44 e55 e66 f77 f88 f99
coothead
Twistcf
#6
Это то, что я искал.
Спасибо
1 Нравится
ПолОБ
#7
твистcf:
Это то, что я искал.
Ради интереса я добавил второй немного более простой пример, который оставляет отображение в виде таблицы (по умолчанию) и использует :before и :after для заполнения пробелов.
2 отметок «Нравится»
5 октября 2020 г., 23:37
#8
Я наблюдаю одну небольшую проблему: когда я помещаю содержимое на телефоны, таблица и ячейки не выстраиваются в линию. Есть ли легкое решение для этого?
Спасибо
Twistcf
#9
Извините, что разместил это, не попробовав версию 2. Она лучше работает на телефонах.
Спасибо
ПолОБ
#10
твистcf:
Извините, разместил это, не попробовав версию 2. Она лучше работает на телефонах.
Да, версия 2 должна быть более надежной, так как она вообще не меняет поведение таблицы.
система Закрыто