Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48

Вёрстка границ таблицы

27.11.2016, 13:13. Показов 1015. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Ребят, а как сделать такой градиент?

 Комментарий модератора 
Один вопрос - одна отдельная тема!
Миниатюры
Вёрстка границ таблицы  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
27.11.2016, 13:13
Ответы с готовыми решениями:

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

Вёрстка элементов списка и грамотное выделение их границ
Доброго времени суток. Пара вопросов: 1) Когда делаю горизонтальный список из ссылок, нужно сделать каждой ячейке границу c одной...

Стилизация границ таблицы
Здравствуйте! Требуется создать стилизованную таблицу и одним из пунктов является стилизация границ. Во-первых, внешних границ у тблицы...

10
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
27.11.2016, 14:52
Цитата Сообщение от Maximka24 Посмотреть сообщение
Ребят, а как сделать такой градиент?
Здесь есть градиент?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        select{
            width: 200px; 
            height: 40px; 
            padding: 10px;
            background: linear-gradient(to top, #fce25b, #ecc92b);
            box-shadow:
              1px 0px rgb(220,195,35) inset, 1px 1px rgb(192,167,7) inset,
              2px 1px rgb(219,194,34) inset, 2px 2px rgb(191,166,6) inset,
              3px 2px rgb(218,193,33) inset, 3px 3px rgb(190,165,5) inset,
              4px 3px rgb(217,192,32) inset, 4px 4px rgb(189,164,4) inset,
              5px 4px rgb(216,191,31) inset, 5px 5px rgb(188,163,3) inset;
        }
        select:focus{outline:none}
    </style>
</head>
<body>
    <select>
        <option value="">Ганс</option>
    </select>
</body>
</html>
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
27.11.2016, 15:08  [ТС]
Блин, надо было сказать в чем вопрос.
Бордеры в таблице не могу сделать)
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
27.11.2016, 15:13
Цитата Сообщение от Maximka24 Посмотреть сообщение
Бордеры в таблице не могу сделать)
И как это связано с градиентом?
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
27.11.2016, 15:20  [ТС]
А как это обозвать?)
Изображения
 
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
27.11.2016, 15:28
Maximka24, я Вам уже делал бордеры в таблице... Или забыли уже? Если Вы попытаетесь их сделать с помощью градиента принципиально ничего не измениться... Можете попробовать использовать свойство border-image, если Вам совсем нечем заняться...
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
27.11.2016, 15:33  [ТС]
Конечно помню. Спасибо вам за это)

Тут принцип тот же, а не получается(
За border-image спасибо) попробую=)
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
27.11.2016, 15:37
Цитата Сообщение от Maximka24 Посмотреть сообщение
Тут принцип тот же, а не получается(
Кто Вам вообще такой макет подсунул? Только сейчас заметил, что они снизу заужаются...
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
27.11.2016, 15:39  [ТС]
Ну я обычно работаю со своим хорошим дизайнером, и проблем никаких нет)

А тут предложили подработку "на стороне". И я по своей малоопытности согласился...
0
0 / 0 / 0
Регистрация: 07.04.2014
Сообщений: 48
04.12.2016, 23:01  [ТС]
Проблема легко решается псевдоелементом)
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
04.12.2016, 23:13
Цитата Сообщение от Maximka24 Посмотреть сообщение
Проблема легко решается псевдоелементом)
Ну и к чему применялся псевдоэлемент интересно? Да, если разместите решение, добрые модераторы поставят плюшку, возможно Ваше решение кому-то пригодиться...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
04.12.2016, 23:13
Помогаю со студенческими работами здесь

Разный цвет границ у ячейки таблицы
В общем, есть таблица, для все td элементов задано свойство border: 1px #bababa solid. Но в таблице есть определенная колонка td, у...

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

верстка таблицы
Добрый день! Есть таблица, сверстанная. Необходимо доработать, чтобы первые пара колонок оставались на месте, остальная часть могла...

Верстка таблицы
Ребят, я только начал изучать CSS Не хочет рисовать таблицу. Что ему надо? &lt;html&gt; &lt;head&gt; &lt;style&gt; &lt;head&gt; ...

Вёрстка таблицы в HTML5
Всем привет! Есть некая таблица данных,файл HTML имеет элемент&quot;DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;.Все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru