Table css border: CSS Table Size (Width and Height)

Содержание

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

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	Griffin

table { border: 1px solid black; }

What are your Feelings

Гацсан хэвээр байна уу? Бид яаж туслах вэ?

Бид яаж туслах вэ?

Name: *

Email: *

Message: *

Updated on 05/08/2021

Office Open XML (OOXML) — обработка текстов

Конфликты границ таблицы

Если в таблице или строке таблицы (исключение на уровне таблицы) указана граница, а в отдельных ячейках также указаны границы, возможен конфликт. Спецификация OOXML указывает, как должны разрешаться такие конфликты.

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

Word 2007 Пример:

Конфликты между границами ячеек и границами таблиц и исключений на уровне таблиц

Если расстояние между ячейками равно нулю, возникает конфликт. Следующие правила применяются в отношении границ ячеек и границ таблицы и исключений (строки) на уровне таблицы:

Если есть граница ячейки, то отображается граница ячейки.
Если граница ячейки отсутствует, но в строке есть граница исключения на уровне таблицы, то отображается эта граница исключения на уровне таблицы.
Если граница исключения на уровне ячейки или таблицы отсутствует, отображается граница таблицы.

Ссылка: ECMA-376, 3-е издание (июнь 2011 г. ), Справочник по основам и языку разметки, § 17.4.40.

Конфликты между соседними ячейками

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

Ссылка: ECMA-376, 3-е издание (июнь 2011 г.), Справочник по основам и языку разметки, § 17.4.67.

Связанное свойство CSS:

Если границы не свернуты и между ячейками имеется достаточное расстояние, конфликт между границами отсутствует. (Обратите внимание, что строки HTML не могут иметь границ — только таблицы и ячейки.)

<таблица>
style=»border-bottom:1px double #FF00FF; border-top:1px double #FF00FF; border-left:2px сплошной #FF0000; border-right:2px сплошной #FF0000;»>AAA< /тд>
style=»border-bottom:1px double #FF00FF; border-top:1px double #FF00FF; border-left:2px сплошной #FF0000; border-right:2px сплошной #FF0000;»>BBB< /тд>
. . .
. . .

Пример CSS:

ААА	ВВВ	ССС
ЕЕЕ	ФФФ	ДДД

<таблица>
style=»border-bottom:1px double #FF00FF; border-top:1px double #FF00FF; border-left:2px сплошной #FF0000; border-right:2px сплошной #FF0000;»>

AAA< /тд>
style=»border-bottom:1px double #FF00FF; border-top:1px double #FF00FF; border-left:2px сплошной #FF0000; border-right:2px сплошной #FF0000;»>BBB< /тд>
. . .

Пример CSS:

ААА	ВВВ	ССС
ЕЕЕ	ФФФ	ДДД

Поместить границу вокруг таблицы и определенных строк и столбцов — HTML и CSS — Форумы SitePoint 2 октября 2020 г., 17:14

Здравствуйте, у меня есть таблица со строками и столбцами. Мне нужно, чтобы у таблицы была граница и информация о группе 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 октября 2020 г. , 17:51

Вы имеете в виду границу каждой из этих отдельных ячеек или одну границу, окружающую все эти ячейки?

твист 2 октября 2020 г., 18:09

Граница вокруг таблицы и группы ячеек, т.е. область с информацией a11, b44, c77 будет иметь границу вокруг нее с окружающей таблицей. Не знаю, можно ли сделать с таблицами.

ПолОБ 2 октября 2020 г., 20:45

Вы можете сделать что-то вроде этого , но это немного запутанно , и я не вижу корреляции для табличных данных как таковых, что означает, что прямая flexbox или даже css-сетка были бы лучшим выбором, чем табличный элемент.

Мне пришлось изменить таблицу на display:flex, чтобы переместить границы, поскольку вы не можете сделать это в таблице (если, возможно, вы не использовали вложенные таблицы).

Это также могло бы быть намного проще, если бы были добавлены соответствующие классы.

головка 2 октября 2020 г., 21:23

Привет, twistcf,

вот очень простой и простой пример…

 

<голова>
<мета-кодировка="utf-8">

<div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";}
else{var rtbBlockID="R-A-744004-5";}
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");}
g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script>Документ без названия

<стиль медиа="экран">
тело {
    цвет фона: #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;
}


<тело>
<дел>
 <таблица>
  <тело>
   
    a11a22a33
   
    b44b55b66
   
    c77c88c99
   
    d11d22d33
   
    e44e55e66
   
    f77f88f99

Ради интереса я добавил второй немного более простой пример, который оставляет отображение в виде таблицы (по умолчанию) и использует :before и :after для заполнения пробелов.

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

Есть ли легкое решение для этого?

Извините, что разместил это, не попробовав версию 2. Она лучше работает на телефонах.

Да, версия 2 должна быть более надежной, так как она вообще не меняет поведение таблицы.