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;
}

 

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Berglunds snabbköpChristina BerglundSweden
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Königlich EssenPhilip CramerGermany
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
North/SouthSimon CrowtherUK
Paris spécialitésMarie BertrandFrance

 

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:

FirstnameLastname
PeterGriffin
LoisGriffin

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:

>

FirstnameLastname
PeterGriffin
LoisGriffin

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 #

FirstnameLastname
PeterGriffin
LoisGriffin

table { border-collapse: collapse; }

If you only want a border around the table, only specify the border property for <table>:

FirstnameLastname
PeterGriffin
Lois
Griffin

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 не могут иметь границ — только таблицы и ячейки.)

<таблица>
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

#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">

<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
   
  
 

coothead

Twistcf

#6

Это то, что я искал.

Спасибо

1 Нравится

ПолОБ

#7

твистcf:

Это то, что я искал.

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

2 отметок «Нравится»

5 октября 2020 г., 23:37

#8

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

Спасибо

Twistcf

#9

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

Спасибо

ПолОБ

#10

твистcf:

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

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

система Закрыто