Border css tr: html — Add border-bottom to table row

css: .item_fact{ border-bottom:#CCCCCC 1px solid; } html: <table> <tr class=item_fact> <td> hello </td> <td> world </td> </tr> </table> IE7 не…

<tr><td><p><strong>Customer Details…

Первый Сценарий : h2{ text-align: center; } td{ width: 100px; height: 100px; border-right: 1px solid gray; border-bottom: 1px solid gray; } table{ margin: 0px auto 0px auto; } tbody…

Я не знаю, возможно ли это but…I я пытаюсь отформатировать таблицу с css, чтобы иметь конкретный вид. Это для сайта wordpress, который будет обновляться моим клиентом. Проблема в том, что она…

У меня есть этот фрагмент html, который отображает сетчатую структуру. Это выглядит так, как я хочу, чтобы это было по большей части, за исключением того, что я хочу иметь пунктирное подчеркивание…

<table> <tr class=empty-row></tr> <tr class=empty-row></tr> <tr> <th>A</th> <th>B</th> </tr> <tr> <td>a</td>.

Моя проблема заключается в том, что в CSS, внутри правила table tr:nth-child(1) , border-bottom-width: 5px не работает, но background-color: gold работает. Есть идеи, как заставить…

Я хочу создать сетчатую структуру типа tic-tac-toe, используя html и css. Я не могу применить верхнюю и нижнюю границу ко второму тегу. Может ли кто-нибудь помочь с этим? td{ width: 100px; height:…

Я просто вижу решение в StackOverflow, чтобы установить border-bottom с tr, но я не понимаю, почему CSS автоматически скрывает границы ячеек. Я пытаюсь применить границы к ячейкам без коллапса…

Оформляем таблицы с помощью CSS: как работать с полями,…

Структура таблицы

Эталонный вариант таблицы

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

<table>
  <thead>
    <tr>
      <th>MO</th>
      <th>TU</th>
      <th>WE</th>
      <th>TH</th>
      <th>FR</th>
      <th>SA</th>
      <th>SU</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="7">
        Working hours
      </th>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="7">
        Workout
      </th>
    </tr>
    <tr>
      <td>0.
  5</td>
      <td>0.5</td>
      <td>0.5</td>
      <td>1</td>
      <td>0.5</td>
      <td>2</td>
      <td>0</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="7">
        Total
      </th>
    </tr>
    <tr>
      <td>8.5</td>
      <td>8.5</td>
      <td>9.5</td>
      <td>10</td>
      <td>5.5</td>
      <td>2</td>
      <td>0</td>
    </tr>
  </tbody>
</table>
 

Выше представлена структура таблицы в HTML. В <thead> содержится главное название. В таблице есть несколько секций <tbody>, каждая из которых имеет собственный подзаголовок.

Что не так с margin и как оформить отступы для элементов таблицы

Как видно на иллюстрации в начале статьи, между главным заголовком и секцией <tbody>, а также между остальными секциями <tbody>, есть отступы. Можно подумать, что они определяются свойствами

Если попытаться использовать margin-top для оформления <tbody>, <thead> или <tr>, добиться отступов не удастся. Чтобы margin заработали, можно изменить свойство display, которое менять опасно, так как изменения могут нарушить форматирование таблицы. Поэтому лучше воспользоваться альтернативными решениями, которые описаны ниже.

Свойство border

Самый простой способ получить отступы без использования margin — применить к <tbody> border-top: 1 em.

// Это нужно, чтобы работал border-top
.table {
  border-collapse: collapse; // 1
  border-spacing: 0;
}

.section {
  border-top: 1em solid transparent;
}

Все секции <tbody>, у которых должны быть отступы, имеют класс .

Псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after — ещё один способ добавить отступы для элементов таблицы.

.section::before {
  height: 1em;
  display: table-row;
  content: '';
}

В данном случае создаётся пустой ряд, который обеспечивает визуальный отступ между секциями <tbody>.

Вы можете использовать для оформления отступов как псевдоэлементы, так и свойство border.

Как применить к элементам таблицы border-radius

Задача: добавить к секциям <tbody> границы и применить к ним border-radius. Напрямую это сделать невозможно — border и border-radius не работают с <tbody>.

// 1.  Приходится использовать свойство box-shadow
//    border-radius не работает с <tbody>.
.section-step {
  border-radius: 0.25em; // 1
  box-shadow: 0 0 0 1px #ccc; // 1
}

Пример выше показывает, как с помощью box-shadow добиться практически такого же результата, как с помощью border при работе с нетабличными элементами.

Как оформлять ячейки таблицы

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

Нужны марджины, а не паддинги

После добавления границ можно заметить, что полученные отступы работают не как «марджины», а как «паддинги». Это можно изменить, если работать с границами ячеек и использовать селекторы :first-child и :last-child.

.section-step th,
.section-step td {
  border: 0 solid #ccc;
}

.section-step th:first-child,
.section-step td:first-child {
  border-left-width: 1px;
}

. section-step th:last-child,
.section-step td:last-child {
  border-right-width: 1px;
}

.section-step tr:first-child th,
.section-step tr:first-child td {
  border-top-width: 1px;
}

.section-step tr:first-child th:first-child,
.section-step tr:first-child td:first-child {
  border-top-left-radius: 0.25em;
}

.section-step tr:first-child th:last-child,
.section-step tr:first-child td:last-child {
  border-top-right-radius: 0.25em;
}

.section-step tr:last-child th,
.section-step tr:last-child td {
  border-bottom-width: 1px;
}

.section-step tr:last-child th:first-child,
.section-step tr:last-child td:first-child {
  border-bottom-left-radius: 0.25em;
}

.section-step tr:last-child th:last-child,
.section-step tr:last-child td:last-child {
  border-bottom-right-radius: 0.25em;
}

В примере выше стили применяются к соответствующим элементам th и td ячеек таблицы. К ячейкам, которые находятся в углах таблицы, применяется border-radius. Все ячейки, которые находятся по краям таблицы, имеют границы. Селекторы :first-child и :last-child позволяют обращаться к нужным ячейкам.

Как применять z-index к элементам таблицы

Проблемы с box-shadow

На первой иллюстрации в статье видно, что свойство box-shadow применяется к подзаголовкам, поэтому тени попадают на следующие ниже ряды таблицы. Если попробовать прямо применить box-shadow к соответствующему элементу, тень в рядах не появится.

В обычной ситуации можно использовать для решения таких проблем z-index. Но с таблицами всё сложнее: z-index не работает с <tbody>. Проблема решается, если вы знаете, как работать с контекстом наложения. Если применить к элементу position: relative и z-index, появляется новый контекст наложения. Также эту задачу можно решить с помощью transform: translate (0, 0).

Заключение

Чтобы сделать таблицы визуально привлекательными, приходится использовать неочевидные трюки CSS. Но этим и хороши CSS — с их помощью можно решить практически любую задачу по оформлению веб-элементов.

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

Адаптированный перевод статьи Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Таблицы (table, tr, td, th) в HTML

Для создания таблицы необходимо использовать тег <table>. Внутри таблицы для создания строк используется тег <tr>, для столбцов — <td>. В итоге, HTML код таблиц выглядит примерно так:

<table border="1" cellspacing="1" cellpadding="1">
   <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
   </tr>
   <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
   </tr>
   <tr>
      <td>Ячейка 7</td>
      <td>Ячейка 8</td>
      <td>Ячейка 9</td>
   </tr>
</table>

Довольно часто для задания первых строчек таблицы используется не <td>. ..</td>, а <th>…</th>. В таком случае весь текст в ячейках первой строчки таблицы будет выделен жирным и выравнен по центру.

cellspacing

cellpadding

border

Рамки таблицы и ячеек можно скрыть совсем, если задать стиль. Читайте подробнее об этом в курсе по CSS.

Высота и ширина таблицы

Попробуем задать таблице из примеры ширину в 300 пикселей, с помощью указания атрибута

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

seodon. ru | CSS справочник — border-style

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

Свойство CSS border-style используется для создания рамки (границы) для каждой стороны HTML-элемента с одновременным указанием стиля (вида) каждой из этих границ.

Если стиль рамки со всех сторон одинаковый, то можно использовать свойство border.

Тип свойства

Назначение: рамки.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства border-style является одно или несколько (через пробел) ключевых слов задающих свой стиль рамки для каждой стороны.

Возможные значения и их описание

Значение	Описание	Пример
none	Рамка убрана, если указана толщина рамки, то она становится равной нулю (0).	none
hidden	Скрывает рамку. То же, что и none за исключением случая с ячейками таблицы, к которым применено свойство border-collapse: collapse. Тогда общая для двух ячеек граница не будет отображена вне зависимости от того, какая рамка имеется у соседней ячейки.	hidden
dotted	Рамка, состоящая из точек.	dotted
dashed	Пунктирная рамка из коротких отрезков.	dashed
solid	Сплошная линия.	solid
double	Двойная сплошная линия.	double
groove	Вид рамки вырезанной в поверхности.	groove
ridge	Противоположно groove. Вид выступающей над поверхностью рамки.	ridge
inset	Рамка, как будто блок вдавили в поверхность.	inset
outset	Противоположно inset. Рамка, будто блок выдавили из поверхности.	outset
inherit	наследует значение border-style от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: none.

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

1. Одно значение — стиль рамки со всех сторон одинаковый.
2. Два значения — первое задает стиль верхней и нижней границы рамки, а второе — левой и правой.
3. Три значения — первое указывает стиль верхней границы, второе — левой и правой, третье — нижней границы рамки.
4. Четыре значения — начиная с верхней границы и по часовой стрелке: для верхней, для правой, для нижней, для левой границы.

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Пример CSS: использование border-style

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon. ru - CSS свойство border-style</title>
  <style type="text/css">
    table {
     width: 100%; /* ширина таблицы */
     border-spacing: 10px; /* расстояния между ячейками */
     text-align: center; /* содержимое ячеек по центру */
     border-color: #9900cc; /* цвет рамки таблицы */
     border-width: 7px; /* толщина рамки */
     border-style: ridge; /* стиль */
    }
    td {
     border-color: #00cc99; /* цвет рамок ячеек */
     border-width: 2px; /* толщина рамок */
     border-style: groove; /* их стиль */
     padding: 3px; /* отступы внутри ячеек */
    }
  </style>
 </head>
 <body>
  <table>
   <tr><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
   <tr><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
  </table>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS border-style.

Версии CSS

Браузеры

Internet Explorer 6.0 и 7.0 не понимают значения inherit и hidden.

Как иметь бордюр-низ, но не тд

Как иметь TR border-bottom, но не тд (тд без какой-либо границы)?

Я пробовал следующие, но тд границы 0 переопределяет границы ТР и всего потока, а вам границы!

  table.admin_datagrid tbody tr {
     граница: сплошной красный 1px;
}

table. admin_datagrid td {
    граница: 0;
}
  

  стол.admin_datagrid tbody tr {

}

table.admin_datagrid td {
    граница слева: 0;
    граница справа: 0;
    border-top: сплошной красный 1px;
    нижняя граница: сплошной красный 1px;
}
  

  <таблица>
    
    
        
            Text1
        
    
    
        
            Text2
        
    
    

  

  table. admin_datagrid td.border-bottom {
     нижняя граница: сплошной красный 1px! important;
}

Таблица.admin_datagrid td {
    граница: 0;
}
  

  table.admin_datagrid td {
    граница: 0;
}

table.admin_datagrid tr {
     дисплей: блок;
     граница: сплошной красный 1px;
}