Витрина таблиц - Tailwind CSS

Эта страница демонстрирует новые современные стили таблиц в стиле Tailwind CSS с улучшенным дизайном.

---

✨ Основные улучшения

🎨 Дизайн:

• Закругленные углы (border-radius: 12px)
• Современные тени (box-shadow)
• Градиентные заголовки
• Декоративная линия под заголовком

⚡ Интерактивность:

• Hover-эффекты на строках
• Плавные анимации (transition)
• Подсветка при наведении
• Трансформация строк (translateY)

🌙 Темная тема:

• Автоматическая адаптация цветов
• Улучшенная контрастность
• Специальные стили для темного режима

📐 Ширина таблиц (Финальный подход):

• width: 100% - полная ширина по умолчанию (для документации)
• table-layout: fixed - равномерные столбцы
• max-width: 100% - не превышает ширину контейнера
• ✅ Тень точно соответствует размеру таблицы (100%)
• word-wrap: break-word для корректного переноса длинного текста

📏 Модификаторы (как в Tailwind CSS):

• .table-compact - для таблиц по ширине контента
• .w-auto table - альтернативный способ компактных таблиц
• .table-extra-wide - для особо широких таблиц

📱 Адаптивность (Правильный подход):

• НЕТ display: block - таблица остается семантичной
• min-width: 600px на мобильных для автоматической прокрутки
• Браузер сам создает горизонтальную прокрутку
• Уменьшенные отступы и размеры шрифтов
• Естественный перенос текста (без white-space: nowrap)

---

📊 Примеры таблиц

Таблица проектов

🎯 Проект	📝 Описание	💻 Технологии	📈 Статус	🗓️ Дедлайн
SoftOnIT Docs	Централизованная документация	Docusaurus, React, Tailwind CSS	✅ Активный	2024-03-15
API Gateway	Микросервисная архитектура	Node.js, Express, Redis	🚧 В разработке	2024-04-01
Analytics Dashboard	Панель аналитики	Vue.js, Chart.js, PostgreSQL	📋 Планирование	2024-05-20
Mobile App	Мобильное приложение	React Native, TypeScript	⏸️ Приостановлен	TBD

Таблица с выравниванием

Левое выравнивание	Центральное	Правое	Числовые данные
Текст слева	По центру	Справа	1,234.56
Длинный текст здесь занимает много места	Короткий	Краткий	987.65
A	B	C	42
JavaScript	TypeScript	React	100%

Таблица пользователей

👤 Пользователь	📧 Email	🏢 Роль	🔑 Права	📊 Активность
Иван Петров	ivan@softonit.ru	👑 Администратор	Полные	🟢 Онлайн
Мария Сидорова	maria@softonit.ru	👨‍💼 Менеджер	Средние	🟡 Неактивен 2ч
Алексей Козлов	alex@softonit.ru	👨‍💻 Разработчик	Ограниченные	🟢 Онлайн
Елена Васильева	elena@softonit.ru	🎨 Дизайнер	Базовые	🔴 Офлайн

Сравнительная таблица

📋 Функция	🆓 Базовый	💎 Премиум	🚀 Корпоративный
Количество пользователей	5	50	∞ Безлимит
Хранилище	1 GB	100 GB	1 TB
API вызовы/месяц	1,000	100,000	1,000,000
Техподдержка	❌	✅ Email	✅ 24/7 Phone
Аналитика	❌	✅ Базовая	✅ Расширенная
Интеграции	3	20	∞ Безлимит
Цена/месяц	$0	$29	$199

Техническая спецификация

⚙️ Компонент	📝 Описание	🏷️ Версия	📊 Производительность
Frontend	React + TypeScript	18.2.0	⚡ Отлично
Backend	Node.js + Express	16.18.0	🚀 Высокая
База данных	PostgreSQL	14.6	💪 Стабильная
Кеш	Redis	7.0.5	⚡ Быстрый
CDN	Cloudflare	-	🌍 Глобальный
Контейнеры	Docker	20.10.21	📦 Изолированные

---

🎛️ Особенности стилизации

Цветовая схема

Светлая тема:

• Фон таблицы: white
• Границы: rgba(229, 231, 235, 1) (gray-200)
• Заголовки: градиент #f9fafb → #f3f4f6
• Hover: голубой градиент с прозрачностью

Темная тема:

• Фон таблицы: rgba(31, 41, 55, 1) (gray-800)
• Границы: rgba(75, 85, 99, 1) (gray-600)
• Заголовки: градиент #374151 → #4b5563
• Hover: усиленный голубой градиент

Эффекты

Hover-эффекты:

transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 197, 253, 0.05));

Декоративная линия:

background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);

Адаптивность

На экранах меньше 768px:

• Горизонтальная прокрутка
• Уменьшенные отступы (0.75rem → 1rem)
• Меньшие размеры шрифтов (0.8rem для td, 0.75rem для th)
• Закругление уменьшается до 8px

---

🔧 Технические детали

CSS селекторы (универсальные):

• .markdown table
• article table
• .theme-doc-markdown table
• main table
• [class*="docusaurus"] table

Использование !important: Все стили используют !important для гарантированного переопределения стандартных стилей Docusaurus.

Border-collapse: Используется border-separate с border-spacing: 0 для поддержки закругленных углов.

Ширина таблиц (финальный подход):

• width: 100% !important - полная ширина по умолчанию (практично для документации)
• table-layout: fixed !important - равномерные столбцы по умолчанию
• max-width: 100% !important - предотвращает переполнение контейнера
• min-width: 600px !important (на широких экранах) - минимальная ширина для читаемости

Модификаторы:

• .table-compact → width: auto + table-layout: auto + min-width: 300px
• .table-extra-wide → min-width: 100% + table-layout: fixed
• .w-auto table → альтернативный синтаксис для компактных таблиц

Переносы текста:

• word-wrap: break-word !important - корректный перенос длинных слов
• overflow-wrap: break-word !important - дополнительная поддержка переносов
• vertical-align: top !important - выравнивание содержимого по верху ячейки

---

🛠️ Примеры использования модификаторов

Обычная таблица (по умолчанию)

Полная ширина, тень точно соответствует размеру:

Название	Описание	Статус	Прогресс
Проект A	Основная разработка	✅ Готов	100%
Проект B	Дополнительные функции	🚧 В работе	75%

Компактная таблица

Добавьте {.table-compact} для ширины по контенту:

| ID | Код |
|----|-----|
| 1  | A   |
| 2  | B   |
{.table-compact}

Результат: таблица будет только по ширине данных

Особо широкая таблица

Добавьте {.table-extra-wide} для гарантированной полной ширины:

| Очень длинное название | Подробное описание | Статус | Дата создания | Последнее обновление |
|------------------------|--------------------|---------|--------------|--------------------|
| ... | ... | ... | ... | ... |
{.table-extra-wide}

---

🎯 Результат

Теперь все таблицы в документации имеют:

• ✅ Современный дизайн в стиле Tailwind CSS
• ✅ Плавные hover-эффекты
• ✅ Поддержку темной темы
• ✅ Тень точно соответствует размеру таблицы (проблема решена!)
• ✅ Полная ширина по умолчанию (практично для документации)
• ✅ Модификаторы для разных случаев (.table-compact, .table-extra-wide)
• ✅ Адаптивность без display: block (семантично)
• ✅ Улучшенную читаемость
• ✅ Профессиональный внешний вид

🔧 Решение проблемы с тенью и содержимым:

• ДО: width: auto + тень 100% = несоответствие
• ПРОМЕЖУТОЧНО: width: 100% + th/td width: auto = таблица растягивается, содержимое нет
• ПОСЛЕ: width: 100% + th/td width: 1% = ✅ таблица И содержимое полностью растягиваются

Проверьте эффекты: наведите курсор на любую строку таблицы выше! 🖱️