Таблица с скругленными уголками
Нажмите на картинку, чтобы посмотреть пример вживую.
HTML код таблицы выглядит следующим образом:
<table> <thead> <tr> <th>Purcus</th> <th>Hantis</th> <th>Mastron</th> <th>Jevicon</th> <th>Language</th> </tr> </thead> <tbody> <tr> <td>Gitsome</td> <td>Some one</td> <td>Take mose</td> <td>Likbes</td> <td>Racounter</td> </tr> <tr> <td>Linkage</td> <td>Fordor</td> <td>Miad ron me</td> <td>Diablo core</td> <td>Tidbade</td> </tr> <tr> <td>Hicura</td> <td>Warecom</td> <td>Xamicon</td> <td>Yamama</td> <td>Udoricano</td> </tr> <tr> <td>Lavistaro</td> <td>Micanorta</td> <td>Ebloconte ma</td> <td>Quad ri port</td> <td>Timesquer</td> </tr> </tbody> </table>
Как видно из кода, таблица состоит из головы (контейнер thead) и тела (контейнер tbody). В отдельном файле пропишем для нее стили. Сначала для всей таблицы:
table { width: 100%; /*Ширина таблицы*/ margin-bottom: 18px; /*Отступ снизу от таблицы*/ padding: 0; /*Отступы внутри таблицы*/ font-size: 13px; /*Размер шрифта*/ border: 1px solid #dddddd; /*Граница таблицы*/ border-spacing: 0; /*Отступы между границами ячеек*/ border-collapse: separate; /*Границы ячеек не склеиваются*/ -webkit-border-radius: 5px; /*Радиус скругления углов у таблицы Safari, Chrome*/ -moz-border-radius: 5px; /*Радиус скругления углов у таблицы Mozilla*/ border-radius: 5px; /*Радиус скругления углов у таблицы*/ color: #666666; /*Цвет текста в таблице*/ font-family: Arial; /*Семейство шрифтов*/ }
Общие свойства для ячеек заголовков таблицы и ячеек тела таблицы:
table th, table td { padding: 10px 10px 9px; /*Отступы внутри ячеек*/ line-height: 18px; /*Межстрочный интервал*/ text-align: left; /*Выравнивание текста по левому краю*/ }
Свойства для ячеек заголовков таблицы:
table th { padding-top: 9px; /*Отступы внутри ячеек*/ font-weight: bold; /*Установка жирного начертания шрифта*/ vertical-align: middle; /*Выравнивание по вертикали. Текст находится по середине*/ color: black; /*Черный цвет в ячейках заголовков таблицы*/ }
Свойства для ячеек в теле таблицы:
table td { vertical-align: top; /*Выравнивание содержимого ячейки по верхнему краю*/ border-top: 1px solid #ddd; /*Верхняя граница ячейки*/ }
Устанавливаем свойства для соседних ячеек, используя соседний селектор:
table th+th,table td+td,table th+td { border-left: 1px solid #ddd; /*Стиль для левой границы между двумя ячейками*/ }
Устанавливаем скругленные уголки для крайних ячеек в таблице:
table thead tr:first-child th:first-child, /*Первая строка первая ячейка в заголовке таблицы*/ table tbody tr:first-child td:first-child /*Первая строка первая ячейка в теле таблицы*/{ -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; } table thead tr:first-child th:last-child, /*Первая строка последняя ячейка в заголовке таблицы*/ table tbody tr:first-child td:last-child /*Первая строка последняя ячейка в теле таблицы*/ { -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; } table tbody tr:last-child td:first-child /*Последняя строка первая ячейка в теле таблицы*/ { -webkit-border-radius: 0 0 0 5px; -moz-border-radius: 0 0 0 5px; border-radius: 0 0 0 5px; } table tbody tr:last-child td:last-child /*Последняя строка последняя ячейка в теле таблицы*/{ -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; }
Также можно указать цвет строки при наведении на нее курсора мыши:
table tr:hover { background-color: #f2f2f2; /*Цвет строки при наведении курсора мыши*/ }
И по вашему усмотрению можно указать цвет нечетных строк в таблице:
table tbody tr:nth-child(odd) td /*Подсветка нечетных строк в таблице*/ { background-color: #f8f8f8; }
Источник: http://psd-html-css.ru/css-notes/tablica-s-skruglennymi-ugolkami
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.