Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
1

Сделать бордюр для таблицы

30.08.2016, 15:34. Показов 1749. Ответов 9
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте! Хочу сделать левый для li бордюр как на картинке, но когда делаю, то бордюр получается для каждого li в свою высоту в соответствии сколько в нем детей, а как сделать чтобы бордюр был в высоту для всех li по самому большому из них?
Без таблиц, js и тд? и если это возможно без flexbox, ничего не против, но хочу научится старых заморочек)

 Комментарий модератора 
Избегайте грамматических ошибок при написании сообщений - уважайте себя и других участников форума.
Миниатюры
Сделать бордюр для таблицы  
0
Лучшие ответы (1)
Сообщение: #9498915
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 30.08.2016, 15:34
Ответы с готовыми решениями:

Как убрать бордюр у формы и сделать ее несворачиваемой?
Погуглил что чтобы убрать рамку нужно выставить WindowStyle="None", но в свойствах формы такого...

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

Нужно сделать формулу для таблицы Excel
Добрый день! Помогите сделать формулу для определения наименьшего числа с строке и столбце...

Как сделать форму для отправки данных в виде таблицы?
У меня не получается сделать форму в виде таблицы (как в Excel), чтобы пользователь записал в неё...

9
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
30.08.2016, 15:45 2
Вероятно так:
CSS
1

ul{border-right:1px dotted}
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
30.08.2016, 15:50  [ТС] 3
Цитата Сообщение от Fedor92 Посмотреть сообщение
ul{border-right:1px dotted}
да, я это понял просто бардюр получается в высоту наполнения <li>, для каждого своя высота...

вот
Миниатюры
Сделать бордюр для таблицы  
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
30.08.2016, 15:58 4
Цитата Сообщение от marketarea Посмотреть сообщение
да, я это понял просто бардюр получается в высоту наполнения <li>, для каждого своя высота...
Пример:
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
    *{box-sizing:border-box; margin: 0; padding: 0}
        .wrap{
            display:table;
            width:100%;
            min-height:100px;
            border-collapse: collapse; 
        }
        
        .block{
            list-style:none;
            display:table-cell;
            width:10%;
            padding:10px;
            height:inherit;
            border-right:1px dotted;
            text-align:left;
            font:14px/1.25 Tahoma
        }
    </style>
</head>
<body> 
    <div class="wrap">
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
            <li>Item-11</li>
            <li>Item-12</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
        </ul>
            <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
            <li>Item-11</li>
            <li>Item-12</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
        </ul>
    </div>
</body>
</html>
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
30.08.2016, 16:04  [ТС] 5
Это с помощю display: table а без ?
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
30.08.2016, 16:06 6
Цитата Сообщение от marketarea Посмотреть сообщение
Это с помощю display: table а без ?
А что в нём плохого?
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
30.08.2016, 16:07  [ТС] 7
Цитата Сообщение от Fedor92 Посмотреть сообщение
А что в нём плохого?
вобще нечего)
но хочу понть как все таки без табличных приколов можно сделать..
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
30.08.2016, 16:12 8
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

Цитата Сообщение от marketarea Посмотреть сообщение
но хочу понять как все таки без табличных приколов можно сделать..
Ой, боюсь, что так и не поймёте... Чтобы делать без табличных приколов надо указывать высоту, как минимум родительского блока, причём не минимальную... Примерчик:
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
    *{box-sizing:border-box; margin: 0; padding: 0}
        .wrap{
            width:100%;
            height:220px;
        }
        
        .block{
            float:left;
            list-style:none;
            height:100%;
            width:10%;
            padding:10px;
            border-right:1px dotted;
            text-align:left;
            font:14px/1.25 Tahoma
        }
    </style>
</head>
<body> 
    <div class="wrap">
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
            <li>Item-11</li>
            <li>Item-12</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
        </ul>
            <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
            <li>Item-11</li>
            <li>Item-12</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
            <li>Item-7</li>
            <li>Item-8</li>
            <li>Item-9</li>
            <li>Item-10</li>
        </ul>
        <ul class="block">
            <li>Item-1</li>
            <li>Item-2</li>
            <li>Item-3</li>
            <li>Item-4</li>
            <li>Item-5</li>
            <li>Item-6</li>
        </ul>
    </div>
</body>
</html>
1
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
30.08.2016, 16:22  [ТС] 9
Цитата Сообщение от Fedor92 Посмотреть сообщение
Ой, боюсь, что так и не поймёте..
понял, я так и думал в принципе, но была надежда на что чего то не доучил
0
 Аватар для monochromer
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
30.08.2016, 18:11 10
Цитата Сообщение от marketarea Посмотреть сообщение
но хочу понть как все таки без табличных приколов можно сделать..
есть еще flexbox
0
30.08.2016, 18:11
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 30.08.2016, 18:11
Помогаю со студенческими работами здесь

Как сделать запрос для вывода диалогов из одной таблицы?
В общем имеется одна таблица для личных сообщений `mail`. Не получается сделать правильно выборку...

Как сделать ограничение кликов до 1 за 3 сек для элемента таблицы
Ребят, как сделать ограничение кликов до 1 за 3 сек для элемента таблицы (если больше, то...

Как сделать копирование и вставку строк таблицы для дерева?
Имеется таблица базы данных. На основании таблицы формируется дерево. Как выполнить...

Бордюр в ComboBox
Здравствуйте. Подскажите как нарисовать рамку бордюра у ComboBox. Да, в VS нет окна показа...


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Как клонировать определенную ветку в Git
bytestream 24.01.2025
Одной из ключевых функций Git является возможность клонирования веток, что позволяет создавать локальные копии удаленных репозиториев и работать с определенными версиями проекта. Этот механизм. . .
Как в цикле обойти строки DataFrame в Pandas Python
bytestream 24.01.2025
DataFrame представляет собой одну из основных структур данных в библиотеке Python Pandas, которая организует информацию в виде двумерной таблицы с строками и столбцами. Эта структура данных особенно. . .
Как получить имя текущей ветки в Git
bytestream 24.01.2025
При работе с Git часто возникает необходимость определить имя текущей ветки, в которой ведется разработка. Знание текущей ветки является критически важным аспектом для эффективного управления. . .
Как отсортировать массив объектов по значению поля объекта в JavaScript
bytestream 24.01.2025
При разработке веб-приложений на JavaScript разработчики часто сталкиваются с необходимостью работать с массивами объектов. Эти структуры данных представляют собой упорядоченные наборы элементов, где. . .
Ошибка "src refspec master does not match any" при пуше коммита в Git
bytestream 24.01.2025
При работе с системой контроля версий Git разработчики нередко сталкиваются с различными ошибками, одной из которых является сообщение "src refspec master does not match any". Эта ошибка возникает. . .
Как округлить не более двух цифр после запятой в JavaScript
bytestream 24.01.2025
При работе с числами в JavaScript разработчики часто сталкиваются с необходимостью округления десятичных значений до определенного количества знаков после запятой. Это особенно важно при работе с. . .
Как сделать UPDATE из SELECT в SQL Server
hw_wired 24.01.2025
В современных системах управления базами данных операции обновления и выборки данных являются фундаментальными инструментами для работы с информацией. SQL Server предоставляет мощные команды UPDATE и. . .
Как вставить элемент в массив на указанный индекс в JavaScript
hw_wired 24.01.2025
Массивы являются одной из фундаментальных структур данных в JavaScript, предоставляющей разработчикам мощный инструмент для хранения и управления упорядоченными наборами данных. Они позволяют хранить. . .
Чем отличаются HashMap и Hashtable в Java
hw_wired 24.01.2025
В мире разработки на Java существует множество инструментов для работы с коллекциями данных, и среди них особое место занимают структуры данных для хранения пар ключ-значение. HashMap и Hashtable. . .
Как конвертировать видео в GIF
hw_wired 24.01.2025
В современном мире анимированные изображения стали неотъемлемой частью цифровой коммуникации. Формат GIF (Graphics Interchange Format) представляет собой особый тип файлов, который позволяет. . .
Как скопировать текст в буфер обмена на JavaScript во всех браузерах
hw_wired 24.01.2025
Копирование текста в буфер обмена стало неотъемлемой частью современных веб-приложений, значительно улучшающей пользовательский опыт и упрощающей работу с контентом. В эпоху активного обмена. . .
Как скрыть клавиатуру на Android
hw_wired 24.01.2025
При разработке Android-приложений часто возникает необходимость управлять видимостью экранной клавиатуры для улучшения пользовательского опыта. Одним из наиболее эффективных способов контроля. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru