Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
0 / 0 / 0
Регистрация: 07.03.2018
Сообщений: 26

Подчеркнуть текст с расстоянием в таблице

22.11.2018, 11:57. Показов 2168. Ответов 5
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Всем привет! Проблема следующая. Мне нужно подчеркнуть текст в таблице, при этом это подчёркивание должно быть на расстоянии, как это сделать? Подскажите, пожалуйста.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <style>
  table {
    border-collapse: collapse;
    margin: 0px auto;
}
 
td {
    border-right: solid 1px grey;
    padding: 5px;
    width: 180px;
}
 
img {
    margin-left: 10px;
}
 
.sp {
    font-weight: bold;
    margin-left: 31px;
}
 
td:nth-child(5) {
    border: none;
}
 
td > img {
    margin-right: 5px;
}
 
span > img {
    margin-right: 5px;
}
 
td:nth-child(1) {
    font-weight: bold;
}
 
tr:nth-child(odd), tr:nth-child(6) {
    background-color: #C9E4F6;
}
 
tr:nth-child(5) {
    background-color: white;
}
</style>  
  <table>
        <tbody>
        <tr>
              <td><img src="https://suzuki-club.ru/attachments/167929/" alt="">Стрижка</td><td><img src="https://suzuki-club.ru/attachments/167929/" alt="">Мужская стрижка<br><span class="sp">500 руб.</span></td><td><img src="https://suzuki-club.ru/attachments/167929/" alt="">Стрижка машинкой<br><span class="sp">500 руб.</span></td><td><img src="https://suzuki-club.ru/attachments/167929/" alt="">Детская (до 12 лет)<br><span class="sp">500 руб.</span></td><td><img src="https://suzuki-club.ru/attachments/167929/" alt="">Укладка+окантовка<br><span class="sp">500 руб.</span></td>
            </td>
        </tr>
        <tr>
            <td>Бритьё</td><td>Королевское бритьё</td><td>Моделирование бороды</td><td>Стрижка бороды и усов</td><td>Бритьё головы</td>
        </tr>
        <tr>
            <td>Комбо</td><td>Друг+друг</td><td>Стрижка+стрижка бороды</td><td>Отец + сын (до 12 лет)</td><td>Стрижка + моделироваие бороды</td>
        </tr>
        <tr>
            <td>Доп. услуги</td><td>Горячий воск</td><td>Чёрная маска + скраб</td><td>Камуфляж седины волос</td><td>Камуфляж бороды</td>
        </tr>
        <tr>
            <td></td><td>Коррекция бровей</td><td></td><td></td><td></td>
        </tr>
        <tr>
            <td>Тату</td><td>Наименование</td><td>Наименование</td><td>Наименование</td><td>Наименование</td>
        </tr>
        </tbody>
    </table>
</body>
</html>
Миниатюры
Подчеркнуть текст с расстоянием в таблице  
0
Лучшие ответы (1)
Сообщение: #13084518
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 22.11.2018, 11:57
Ответы с готовыми решениями:

Как подчеркнуть текст
Как подчеркнуть заголовок чтобы, подчёркивание было длиннее текста??? :scratch:

Не получается программно подчеркнуть текст в Label
не срабатывает ни одна ни вторая команда label2.Underline = true; label2.Font.Underline = true; Добавлено через 21 минуту не...

Установить соответствие между расстоянием в милях и расстоянием в киломтерах
установить соответствие между расстоянием в милях и расстоянием в киломтерах для значений от 1 до 20 с шагом в 2 мили . 1 миля=1,609344...

5
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
22.11.2018, 13:04
SandraR, приветствую
Выделить нужный текст в div c с классом и дайте диву стили
CSS
1
2
3
4

класс дива{
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
0
0 / 0 / 0
Регистрация: 07.03.2018
Сообщений: 26
22.11.2018, 13:58  [ТС]
Qwerty_Wasd, спасибо, сделала вот так
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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <style>
  table {
    border-collapse: collapse;
    margin: 0px auto;
}
 
td {
    border-right: solid 1px grey;
    padding: 5px;
    width: 180px;
}
 
img {
    margin-left: 10px;
}
 
.sp {
    font-weight: bold;
    margin-left: 35px;
}
 
td:nth-child(5) {
    border: none;
}
 
td > img {
    margin-right: 5px;
  float: left;
}
 
span > img {
    margin-right: 5px;
}
 
td:nth-child(1) {
    font-weight: bold;
}
 
tr:nth-child(odd), tr:nth-child(6) {
    background-color: #C9E4F6;
}
 
tr:nth-child(5) {
    background-color: white;
}
    .allo {
  padding-bottom: 5px;
  border-bottom: 1px solid gray;  
  margin-left: 35px;
  margin-bottom: 5px;
}
</style>  
  <table>
        <tbody>
        <tr>
              <td><img src="https://suzuki-club.ru/attachments/167929/" alt="">Стрижка</td><td><img src="https://suzuki-club.ru/attachments/167929/" alt=""><div class="allo">Мужская стрижка</div><span class="sp">500 руб.</span></td><td><img src="https://suzuki-club.ru/attachments/167929/" alt=""><div class="allo">Стрижка машинкой</div><span class="sp">500 руб.</span></td><td><img src="https://suzuki-club.ru/attachments/167929/" alt="">Детская (до 12 лет)<br><span class="sp">500 руб.</span></td><td><img src="https://suzuki-club.ru/attachments/167929/" alt="">Укладка+окантовка<br><span class="sp">500 руб.</span></td>
            </td>
        </tr>
        <tr>
            <td>Бритьё</td><td>Королевское бритьё</td><td>Моделирование бороды</td><td>Стрижка бороды и усов</td><td>Бритьё головы</td>
        </tr>
        <tr>
            <td>Комбо</td><td>Друг+друг</td><td>Стрижка+стрижка бороды</td><td>Отец + сын (до 12 лет)</td><td>Стрижка + моделироваие бороды</td>
        </tr>
        <tr>
            <td>Доп. услуги</td><td>Горячий воск</td><td>Чёрная маска + скраб</td><td>Камуфляж седины волос</td><td>Камуфляж бороды</td>
        </tr>
        <tr>
            <td></td><td>Коррекция бровей</td><td></td><td></td><td></td>
        </tr>
        <tr>
            <td>Тату</td><td>Наименование</td><td>Наименование</td><td>Наименование</td><td>Наименование</td>
        </tr>
        </tbody>
    </table>
</body>
</html>
Но хочу спросить у Вас, быть может есть какие-то способы, чтобы линия автоматически была по длине текста (width: auto; не помогает, получается на длину ячейки, задаю отступ слева, так как он во всех ячейках одинаковый, а вот справа не смогу, так как длина текста в каждой ячейке отличается, придётся каждому диву прописывать длину? Или можно как-то проще это всё дело сделать?)
0
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
22.11.2018, 14:31
Лучший ответ Сообщение было отмечено SandraR как решение

Решение

SandraR,
Цитата Сообщение от SandraR Посмотреть сообщение
Или можно как-то проще это всё дело сделать?
CSS
1
2
3
4
5

.lined {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid gray;
}
https://codepen.io/qwerty_wasd/pen/RqMbQd
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

<table>
  <tbody>
    <tr>
      <td><img src="https://suzuki-club.ru/attachments/167929/" alt=""/>Стрижка</td>
      <td><img src="https://suzuki-club.ru/attachments/167929/" alt=""/>
        <div class="lined">Мужская стрижка</div><br/><span class="sp">500 руб.</span>
      </td>
      <td><img src="https://suzuki-club.ru/attachments/167929/" alt=""/>
        <div class="lined">Стрижка машинкой</div><br/><span class="sp">500 руб.</span>
      </td>
      <td><img src="https://suzuki-club.ru/attachments/167929/" alt=""/>
        <div class="lined">Детская (до 12 лет)</div><br/><span class="sp">500 руб.</span>
      </td>
      <td><img src="https://suzuki-club.ru/attachments/167929/" alt=""/>
        <div class="lined">Укладка+окантовка</div><br/><span class="sp">500 руб.</span>
      </td>
    </tr>
    <tr>
      <td>Бритьё</td>
      <td>
        <div class="lined">Королевское бритьё</div>
      </td>
      <td>
        <div class="lined">Моделирование бороды</div>
      </td>
      <td>
        <div class="lined">Стрижка бороды и усов</div>
      </td>
      <td>
        <div class="lined">Бритьё головы</div>
      </td>
    </tr>
    <tr>
      <td>Комбо</td>
      <td>
        <div class="lined">Друг+друг</div>
      </td>
      <td>
        <div class="lined">Стрижка+стрижка бороды</div>
      </td>
      <td>
        <div class="lined">Отец + сын (до 12 лет)</div>
      </td>
      <td>
        <div class="lined">Стрижка + моделироваие бороды</div>
      </td>
    </tr>
    <tr>
      <td>Доп. услуги</td>
      <td>
        <div class="lined">Горячий воск</div>
      </td>
      <td>
        <div class="lined">Чёрная маска + скраб</div>
      </td>
      <td>
        <div class="lined">Камуфляж седины волос</div>
      </td>
      <td>
        <div class="lined">Камуфляж бороды</div>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div class="lined">Коррекция бровей</div>
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Тату</td>
      <td>Наименование</td>
      <td>Наименование</td>
      <td>Наименование</td>
      <td>Наименование</td>
    </tr>
  </tbody>
</table>
CSS
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

*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
table {
  border-collapse: collapse;
  margin: 0px auto;
}
 
td {
  border-right: 1px solid grey;
  padding: 15px;
  width: 220px;
  text-align: center;
}
td:nth-child(5) {
  border: none;
}
td > img {
  margin-right: 5px;
}
td:nth-child(1) {
  font-weight: bold;
}
 
img {
  margin-left: 10px;
}
 
.sp {
  font-weight: bold;
  margin-left: 31px;
}
 
span > img {
  margin-right: 5px;
}
 
tr:nth-child(odd) {
  background-color: #C9E4F6;
}
tr:nth-child(6) {
  background-color: #C9E4F6;
}
tr:nth-child(5) {
  background-color: white;
}
 
.lined {
  display: inline-block;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid grey;
}
1
0 / 0 / 0
Регистрация: 07.03.2018
Сообщений: 26
22.11.2018, 14:40  [ТС]
Qwerty_Wasd, спасибо большое)
0
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
22.11.2018, 14:42
SandraR, не за что, удачи
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 22.11.2018, 14:42
Помогаю со студенческими работами здесь

Подчеркнуть текст несколько раз разными цветами
Добрый день, подскажите плииииз. Есть текст в div, его надо подчеркнуть несколько раз разными цветными линиями. (не ссылки!) ...

Как выделить/подчеркнуть текст/слово, например, как в MS Word
Здравтсвуйте! Как выделить/подчеркнуть текст/слово, например, как в MS Word.

Как подчеркнуть текст, как будто бы он на листке бумаги?
Здравствуйте, уважаемые форумчане! Создаю что-то вроде генерации doc-файла. Но суть не в этом. Как можно осуществить подчеркивание,...

Текст в таблице
Подскажите пожалуйста. Как в таблице в Ворде сделать так, чтобы текст был сплошной и мог вписаться в несколько ячеек последовательно как в...

Текст в таблице
Почему, когда я пишу текст в таблице, текст находится по центру таблицы, а не в самом начале (вверху). Как сделать чтобы текст был...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru