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

Содержание

Как иметь TR border-bottom, но не td



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

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

table.admin_datagrid tbody tr {
     border:1px solid red;
}

table.admin_datagrid td{
    border: 0;
}
css
Поделиться Источник user385729     07 марта 2014 в 17:11

4 ответа




2

Означает ли u границу только между рядами, а не между кольцами?

table.admin_datagrid tbody tr {

}

table.admin_datagrid td{
    border-left: 0;
    border-right: 0;
    border-top:1px solid red;
    border-bottom:1px solid red;
}

Поделиться SalkinD     07 марта 2014 в 17:15



1

Ваша проблема не в том, что граница td переопределяет границу tr , проблема в том, что вы пытаетесь установить границу на

tr . Вместо этого попробуйте назначить класс на td элементов в строке, которые должны иметь нижнюю границу:

HTML:

<table>
    <tbody>
    <tr>
        <td>
            Text1
        </td>
    </tr>
    <tr>
        <td>
            Text2
        </td>
    </tr>
    </tbody>
</table>

CSS:

table.admin_datagrid td.border-bottom {
     border-bottom: 1px solid red !important;
}

table.admin_datagrid td{
    border: 0;
}

JSFiddle: http://jsfiddle.net/J7b3M/

Поделиться mayabelle     07 марта 2014 в 17:17



0

Порядок изменения и добавить display:block :

table.admin_datagrid td{
    border: 0;
}

table.admin_datagrid tr {
     display: block;
     border:1px solid red;
}

Fiddle: http://jsfiddle.

net/z5GZN/

Поделиться Hardy     07 марта 2014 в 17:19


  • стиль border-bottom, не имеющий эффекта

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

  • Как я могу применить border-bottom к последнему не пустому <tr>?

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



0

Добавьте border-collapse:collapse в таблицу:

DEMO

table{
      border-collapse: collapse; 
}
table.
admin_datagrid tbody tr { border: 1px solid red; } table.admin_datagrid td{ border: 0; }

Поделиться Juan     07 марта 2014 в 17:23


Похожие вопросы:


Border-top от tbody и border-bottom от thead не работают одновременно?

У меня есть очень простой стол: <table id=ttable5 class=table-default> <thead> <tr> <th>Nombre</th> <th class=sort-date>Provincia</th> <th...


css border-bottom iexplorer

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


td border, border-bottom не печатается в pdf с помощью библиотеки itext

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


Разница между при применении tbody td:nth-of-type(3) { border-bottom-color: transparent; } и tr.
noborder td{ border-bottom: transparent;} в CSS

Первый Сценарий : 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...


Custom css для форматирования tr td, но не при обнаружении полужирного шрифта внутри td

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


стиль border-bottom, не имеющий эффекта

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


Как я могу применить border-bottom к последнему не пустому <tr>?

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

..


Border-bottom-width не отображается в таблице

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


Невозможно применить border-top и border-bottom к тегу <tr>

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


Почему border-bottom не работает с tr без border-collapse?

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

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

Ещё несколько лет назад фронтенд-разработчики активно использовали табличную вёрстку для создания веб-страниц.

Сегодня появились более удобные инструменты, а тег <table> теперь применяется по прямому назначению: для создания таблиц с данными. Однако оформлять таблицы по-прежнему не так просто. Некоторые CSS-свойства, например, margin, border-radius, z-index, не работают с элементами таблиц <tbody>, <thead>, <tr>. Статья поможет обойти эти ограничения.

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

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


Иллюстрация выше показывает, как можно оформить таблицу с помощью 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>, но это не так.

Если попытаться использовать 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>, у которых должны быть отступы, имеют класс . section. Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse.

Псевдоэлементы ::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

В статье будут рассмотрены несколько вопросов: как сделать 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>
Код из этого примера отобразит на странице следующую стаблицу:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

Разберём атрибуты, которые указаны в примере таблицы:

cellspacing

cellspacing="1" - этот атрибут определят расстояние между ячейками таблицы. Если его поставить, к примеру, равным 10, то таблица будет выглядеть так:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

cellpadding

cellpadding="1" - значение этого атрибута атрибута задает отступ от текста внутри ячеек таблицы от стенок. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

border

border="1" - устанавливает толщину рамки таблицы в пикселях. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

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

У тега есть атрибуты, которые задают ширину (width) и высоту (height) таблицы. Значения этих атрибутов задают ширину и высоту в пикселях.

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

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

Если задать, то получится такой результат:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

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

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



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

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

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

table. admin_datagrid td {
    граница: 0;
}
  
css
Поделиться Источник пользователь 385729 07 марта 2014 в 17:11

4 ответа




2

Означает ли u границу только между рядами, а не между кольцами?

  стол.admin_datagrid tbody tr {

}

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

Поделиться СалкинD 07 марта 2014 в 17:15



1

Ваша проблема не в том, что вы пытаетесь установить границу td переопределяет границу tr , проблема в том, что вы пытаетесь установить границу на tr .Вместо этого введите назначить класс на td элементов в строке, которые должны иметь нижнюю границу:

HTML:

  <таблица>
    
    
        
            Text1
        
    
    
        
            Text2
        
    
    

  

CSS:

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

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

JSFiddle: http://jsfiddle.net/J7b3M/

Поделиться майабель 07 марта 2014 в 17:17



0

Порядок изменения и добавить дисплей: блок :

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

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

Скрипка: http: // jsfiddle.net / z5GZN /

Поделиться Харди 07 марта 2014 в 17:19


  • стиль border-bottom, не имеющий эффект

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

  • Как я могу применить border-bottom к последнему не пустому ?



    0

    Добавьте border-collapse: collapse в таблицу:

    ДЕМО

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

    Поделиться Хуан 07 марта 2014 в 17:23


    Похожие вопросы:


    Border-top от tbody и border-bottom от thead не работают одновременно?

    У меня есть очень простой стол:

    A B
    a b
    ..


    css граница снизу iexplorer

    css: .item_fact {border-bottom: #CCCCCC 1px solid; } html:

    Nombre Provincia
    привет мир
    IE7 не ...


    td border, border-bottom не печатается в pdf с помощью библиотеки itext

    Сведения о клиенте ...


    Разница между при применении tbody td: nth-of-type (3) {border-bottom-color: transparent; } и tr.noborder td {border-bottom: transparent;} в CSS

    Первый Сценарий: h2 {text-align: center; } тд {ширина: 100 пикселей; высота: 100 пикселей; border-right: сплошной серый цвет 1px; нижняя граница: сплошной серый 1px; } таблица {margin: 0px auto 0px auto; } tbody ...


    Пользовательский css для форматирования tr td, но не при обнаружении полужирного внутри td

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


    стиль border-bottom, не имеющий эффекта

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


    Как я могу применить border-bottom к последнему не пустому ?

    ...


    Border-bottom-width не отображается в таблице

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


    Невозможно применить border-top и border-bottom к тегу

    Я хочу создать сетчатую структуру типа крестики-нолики, используя html и css. Я не могу применить верхнюю и нижнюю границу ко второму тегу.Может ли кто-нибудь помочь с этим? тд {ширина: 100 пикселей; рост:. ..


    Почему border-bottom не работает с tr без border-collapse?

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

    Как получить border-radius на tr: hover?



    Сначала у меня есть большой

    он содержит
    A B
    а
    , что я хочу это:

    • Таблица (или содержимое) должна иметь радиус границы (10px)
    • При передаче курсора на данную строку (не <таблица> , а просто
    : фон-цвет меняется (это нормально), но содержимое должно границу-радиус (это не нормально на данный момент) вопрос)

    Как сделать границу-радиус

    показанным (теперь tr" переопределяет его, и граница-исчезает при наведении курсора)

    Вот простой скрипт (желтый цвет должен быть таким же, как серый при наведении = та же ширина тот же радиус границы)

     . content {
      ширина: 100%;
      высота: авто;
      радиус границы: 10 пикселей;
      цвет фона: серый;
    }
    
    Таблица{
      ширина: 100%;
      курсор: указатель;
    }
    
    tr {
      ширина: 100%;
      радиус границы: 10 пикселей! важно;
    }
    
    table tr: hover {
      цвет фона: золото;
      радиус границы: 10 пикселей;
    }  
      
    <таблица>
    привет мир
html css
Поделиться Источник Суши 18 июля 2016 в 09:18

4 ответа


  • CSS наведение на tr: hover

    У меня есть таблица, и у меня есть глобальный код css для tr: эффект наведения.Но иногда я не хочу использовать этот эффект парения на своих столах. Пожалуйста, посмотрите на код и скажите мне, как я не запустю эффект на этой таблице. JSFIDDLE. Здесь есть идентификатор css. Название ее ...

  • что заставляет border-radius не работать?

    Я проверил это как в Chrome, так и в Firefox. Я пытаюсь сделать небольшие закругленные края на столе. Вот jfiddle: http: // jsfiddle.net / hz018pLz / Когда я использую CTRL + SHIFT + I, чтобы посмотреть вычисленные стили, я вижу, что этот ...



3

Граница-радиус применить к элементу тд .

Используйте селекторы : first-child и : last-child для применения радиуса границы.

  .content {
  ширина: 100%;
  высота: авто;
  радиус границы: 10 пикселей;
  цвет фона: серый;
}
Таблица {
  ширина: 100%;
  курсор: указатель;
}
tr {
  ширина: 100%;
  радиус границы: 10 пикселей! важно;
}
table tr: hover {
  цвет фона: золото;
  радиус границы: 10 пикселей;
}
table tr: hover td: first-child {
  граница-верх-левый-радиус: 10 пикселей;
  граница-нижний-левый-радиус: 10 пикселей;
}
table tr: hover td: last-child {
  граница-верх-правый-радиус: 10 пикселей;
  граница-нижний-правый-радиус: 10 пикселей;
}  
  
<таблица> привет мир

Поделиться Пугаж 18 июля 2016 в 09:23



0

Вам нужно применить border-radius к тегам td , а не к тегам tr . Предполагается, что у вас есть несколько строк в таблице, каждая из которых содержит несколько ячеек, вам нужно будет установить border-radius для четырех разных ячеек:

  • Верхний левый угол первой ячейки первой строки,
  • Верхний правый край последней ячейки первой строки,
  • В нижнем крайнем ряду строк, и,
  • В правом верхнем углу последней строки.

Вот как вы это сделаете:

  стол {
  фон: серый;
  радиус границы: 10 пикселей;
  ширина: 100%;
}
tr: hover> td {
  фон: золото;
}
tr: first-child> td: first-child {
  граница-верх-левый-радиус: 10 пикселей;
}
tr: first-child> td: last-child {
  граница-верх-правый-радиус: 10 пикселей;
}
tr: last-child> td: first-child {
  граница-нижний-левый-радиус: 10 пикселей;
}
tr: last-child> td: last-child {
  граница-нижний-правый-радиус: 10 пикселей;
}  
  <таблица>
  
    
       Lorem 
       Ипсум 
       Долор 
    
    
       Лорем 
       Ипсум 
       Долор 
    
    
       Лорем 
       Ипсум 
       Долор 
    
  
  

Поделиться лохматый 18 июля 2016 в 10:22



0

вам также нужно border-radius на td вот почему этот цвет идет по радиусу tr

Я поставил border-top-left-radius и border-bottom-left-radius на первый td и border-top-right-radius и border-bottom-right-radius на последнем td

дайте мне знать, если это поможет

 . content {
  ширина: 100%;
  высота: авто;
  радиус границы: 10 пикселей;
  цвет фона: серый;
}

Таблица{
  ширина: 100%;
  курсор: указатель;
}

tr {
  ширина: 100%;
  радиус границы: 10 пикселей! важно;
}
td: last-child {
  -webkit-border-top-right-radius: 10 пикселей;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10 пикселей;
  -moz-border-radius-bottomright: 10 пикселей;
  граница-верх-правый-радиус: 10 пикселей;
  граница-нижний-правый-радиус: 10 пикселей;
}
td: first-child {
   -webkit-border-top-left-radius: 10 пикселей;
   -webkit-border-нижний левый-радиус: 10 пикселей;
   -moz-border-radius-topleft: 10 пикселей;
   -moz-border-radius-bottomleft: 10 пикселей;
   граница-верх-левый-радиус: 10 пикселей;
   граница-нижний-левый-радиус: 10 пикселей;
}

table tr: hover {
  цвет фона: золото;
  радиус границы: 10 пикселей;
}  
  
<таблица> привет мир

Поделиться Михай Т 18 июля 2016 в 09:37




-1

HTML :

  
<таблица> привет мир

CSS :

 . content {
  ширина: 100%;
  высота: авто;
  радиус границы: 10 пикселей;
  цвет фона: серый;
}

Таблица{
  ширина: 100%;
  курсор: указатель;
}

tr: первый ребенок td: первый ребенок {граница-верхний-левый-радиус: 10 пикселей; }
tr: первый ребенок td: последний ребенок {граница-верхний-правый-радиус: 10 пикселей; }
tr: последний ребенок td: первый ребенок {граница-нижний-левый-радиус: 10 пикселей; }
tr: последний ребенок td: последний ребенок {граница-нижний-правый-радиус: 10 пикселей; }

table tr: hover {
  цвет фона: золото;
  радиус границы: 10 пикселей;
}
  

Поделиться адитья 18 июля 2016 в 09:33


Похожие вопросы:


jquerycurvycorners: -moz-border-radius заменить на border-radius

IE9, Firefox 4, Opera 10.5, Safari 5, Chrome 4, WebKit 532.5 поддерживает CSS3 border-radius. Последняя версия jquerycurvycorners 2.1.1 использует -moz-border-radius, а не border-radius для . ..


border-radius не работает на IE10

Мне нужен контейнер DIV со скругленными углами. Следующий код отлично работает во всех браузерах, кроме моего IE10. Я понятия не имею, как это сделать, чтобы заставить его работать. # about-kader {...


Добавление радиуса границы изменяет цвет границы свойства

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


CSS - отключение на tr: hover

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


что заставляет border-radius не работать?

Я проверил это как в Chrome, так и в Firefox.Я пытаюсь сделать небольшие закругленные края на столе. Вот jfiddle: ...


Радиус линии строки не работает на Firefox

Я делаю моих фон таблицы таблицы с закругленным углом. Вот это CSS:

...


Применение стиля к строке таблицы с селектором tr: hover css не работает в IE 8 (в случае действия наведения мыши на * tr> td> div> input text *)

Наведите курсора мыши на правило (tr), используя правило перехода, но в случае наведения курсора мыши на дочернее текстовое руководство используется правило tr: hover.Я сталкиваюсь с этой ...


Как применить границу радиуса к в бутстрапе?

Мне нужна строка, которая должна иметь закругленные углы и расстояние между строками-row. Итак, я попробовал таблицу класса table-curved, как показано ниже. Любые предложения / изменения были бы ...


Как добавить border-radius на элемент _26?

Я хочу добавить стиль border-radius на элемент

.
первая ячейка средняя ячейка третья ячейка
... ...


border-radius не применяется к тегу строки даже после использования border-collapse: отдельный

радиус границы не применяется к тегу строки даже после использования border-collapse: отдельный

..

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

В статье рассмотрены несколько вопросов: как сделать таблицу HTML, как добавить и ячейку в таблицу, как объединить строки или ячейки в таблице.

Для создания таблицы необходимо использовать тег

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

Разберём атрибуты, которые указаны в примерах таблицы:

расстояние между ячейками

cellspacing = "1" - этот атрибут определят расстояние между ячейками таблицы. Если его поставить, к примеру, равным 10, то таблица будет выглядеть так:
. В итоге код таблиц выглядит примерно так:

  
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9
Код из этого примера показан на странице стаблицу:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Довольно часто для первых заданий строчек таблицы используется не

. .. ...
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

подкладка для ячеек

cellpadding = "1" - значение этого атрибута атрибута задает отступ от текста внутри ячеек таблицы от стенок.Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

бордюр

border = "1" - устанавливает толщину рамки таблицы в пикселях. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

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

У тега есть атрибуты, которые задают ширину (ширину) и высоту (высоту) таблицы. Значения этих атрибутов задают ширину и высоту в пикселях.

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

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

Если указать, то получится такой результат:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Nth-child и nth-of-type • Про CSS

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

Вот простой пример полосатых таблиц:

Полоски легче легче скользить глазами по длинной строке или столбцу, увеличить читабельность больших таблиц, а сделать это можно всего лишь парой строчек в CSS:

 
TR: nth-child (odd) {
  фон: #EEE;
}


TD: nth-child (odd) {
  фон: #EEE;
}  

Или вот что можно сделать с обычным списком вроде такого:

  

Никаких дополнительных классов, все сделано только с помощью : nth-child :

Вот пример разноцветного дизайна для ЖЖ, где используется этот же эффект:

Если у вас есть ЖЖ, вы можете установить этот дизайн из каталога.

Как работает nth-child ()?

В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент. Также можно задать сдвиг вперед или назад: (3n + 1) - найдет каждый третий и сделает один шаг вперед, а (3n-2) - два шага назад от найденого. Если размер цикла не задан - (n) - выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число - (5) - выберется элемент списка с этим индексом.

nth-child в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.

Селектор работает во всех современных браузерах с поддержкой CSS3.

Примеры

: nth-ребенок (3n)

Выбирает каждый 3-й элемент списка.


: nth-ребенок (3n + 1)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг вперед. Таким образом можно выбрать первые элементы в каждой группе.


: nth-ребенок (даже) =: nth-child (2n)

(четное) - слово, выбирает четные элементы списка, как если бы мы задали (2n) .


: n-й ребенок (нечетный) =: n-й ребенок (2n + 1)

(нечетное) - слово, выбирает нечетные элементы, как если бы мы задали (2n + 1) .


: nth-ребенок (3n-1) =: nth-child (3n + 2)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг назад.


: nth-ребенок (5) =: nth-child (0n + 5)

Выберет 5-й элемент списка.


: n-й ребенок (n + 6)

Выберет все элементы начиная с 6-го.


: nth-ребенок (-n + 6)

Выберет 6 элементов с начала списка.

Сочетания селекторов

: nth-ребенок (n + 3): nth-ребенок (-n + 8)

Выберет элементы в диапазоне от 3 до 8-ми.


: nth-ребенок (n + 4): nth-child (даже)

Выберет элементы начиная с 4-го, а затем выделит только четные из них.


: nth-child (3n + 1): nth-child (даже)

Выберет 1-й, 4-й, 7-й и 10-й элементы, а затем только четные из них.


: nth-child (n + 3): nth-child (-n + 8): nth-child (даже)

Выберет элементы с 3-го по 8-й, а затем только четные из них.


nth-of-type ()

Все примеры выше сделаны на основе однородного списка, но если нам требуется выбрать, например, несколько абзацев в статье, которая содержит не только абзацы, но и заголовки?

Предположим, мы хотим покрасить нечетные абзацы, поэтому напишем что-то вроде:

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

: nth-child считает все элементы, не обращая внимания на тег, хотя показывает только те, которые соответствуют заданному тегу или классу.

Чтобы выбрать только абзацы, нам потребуется другой селектор - : nth-of-type :

: nth-of-type работает также, как : nth-child , но считает только элементы заданного типа.