Не работает rowspan и colspan

@TeoBR · Регистрация: 20.05.2022

Студворк — интернет-сервис помощи студентам

Добрый день, у меня появилась проблема с таблицами. Я сразу делал их на генераторе таблиц, в генераторе всё показывает корректно, но у меня не работает объединение ячеек.

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
        <table class="p-pdf" style="display: flex; justify-content: center; font-size: 20px;">
            <tbody>
                <tr>
                    <td rowspan="3">Вид покрытия</td>
                    <td colspan="3">Нормы на</td>
                    
                </tr>
                <tr>
                    <td rowspan="2">Устройство покрытия пола</td>
                    <td colspan="2">Установка жилок</td>
                </tr>
                <tr>
                    <td>стеклянных</td>
                    <td>латунных</td>
                </tr>
                <tr>
                    <td>С прямолинейным рисунком жилками длиной до 3 м на 1м2 пола или с рисунком в шашку</td>
                    <td>0,8/10
        </td>
                    <td>0,12/66</td>
                    <td>0,16/50</td>
                </tr>
                <tr>
                    <td>С прямолинейным рисунком жилками длиной более 3 м на 1м2 пола или с криволинейным рисунком</td>
                    <td>1,0/8
        </td>
                    <td>0,22/36,3</td>
                    <td>0,23/35</td>
                </tr>
            </tbody>
        </table>

Я многое попробовал, например убрать стили, или поставить стиль, который мне автоматически сделал генератор.
На всякий случай стили для таблиц. Первый для конкретной станицы.

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <style>
        
        tr{
            display: flex;
            justify-content: flex-start;
        }
        .tdwi{
            width: 300px;
            text-align: left;
            justify-content: start;
        }
        tr, td{
                border:rgb(64, 132, 60);
                border: 0.2px;
                border-style:outset;
            }
        </style>

Второй для всех таблиц на всех страницах.

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 td{
  display: flex;
  justify-content: center;
  width: 200px;
 }
 tr{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
 }
 .p-pdf{
    font-size: 25px;
    font-family: Shentox;
    color: #535019;
    text-align:justify;
    width: 940px;
  }

@rr33rr · 06.12.2023, 12:29

Сообщение от TeoBR

Добрый день, у меня появилась проблема с таблицами.

Нарисуйте, как должно быть

@TeoBR · 06.12.2023, 12:32 **[ТС]**

Вот скриншот с генератора таблиц.

@TeoBR · 06.12.2023, 12:34 **[ТС]**

Вот.

@rr33rr · 06.12.2023, 12:57

Сообщение от TeoBR

Вот.

Уберите все display: flex; из ваших стилей. Они тут только мешают.

Вроде такого:

PHP/HTML
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
<!doctype html>
<html>
<head>
<style>
body {
  background: rgb(208, 204, 179);
}
tr, td {
  border: rgb(64, 132, 60);
  border: 0.2px;
  border-style: outset;
}
td {
  width: 200px;
  padding: 4px;
}
.p-pdf {
  font-size: 25px;
  font-family: Shentox;
  color: #535019;
  text-align: justify;
  width: 940px;
}
</style>
</head>
<body>
<table class="p-pdf" style="font-size: 20px;">
  <tr>
    <td rowspan="3">Вид покрытия</td>
    <td colspan="3">Нормы на</td>
  </tr>
  <tr>
    <td rowspan="2">Устройство покрытия пола</td>
    <td colspan="2">Установка жилок</td>
  </tr>
  <tr>
    <td>стеклянных</td>
    <td>латунных</td>
  </tr>
  <tr>
    <td>С прямолинейным рисунком жилками длиной до 3 м на 1м2 пола или с рисунком в шашку</td>
    <td>0,8/10</td>
    <td>0,12/66</td>
    <td>0,16/50</td>
  </tr>
<tr>
    <td>С прямолинейным рисунком жилками длиной более 3 м на 1м2 пола или с криволинейным рисунком</td>
    <td>1,0/8</td>
    <td>0,22/36,3</td>
    <td>0,23/35</td>
  </tr>
</table>
</body>
</html>

См в песочнице

@TeoBR · 06.12.2023, 13:00 **[ТС]**

Спасибо, огромное. Хотя на сайте убирал флексы, у меня все равно почему-то не работало. Спасибо за помощь!

@ivanov_333 · 06.12.2023, 13:07

TeoBR,

Только что увидел, что вам уже дали ответ, но вот и мое решение.

Уберите всех ваших стилей(они мешаются взаимно), кроме:

CSS
1
2
3
4
5
6
7
<style>
    tr, td{
         border:rgb(64, 132, 60);
         border: 0.2px;
         border-style:outset;
    }
</style>

Вот вес код:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Form</title>
        <style>
            tr, td{
                border:rgb(64, 132, 60);
                border: 0.2px;
                border-style:outset;
            }
        </style>
    </head>
    <body>
          <table class="p-pdf" style="display: flex; justify-content: center; font-size: 20px;">
            <tbody>
                <tr>
                    <td rowspan="3">Вид покрытия</td>
                    <td colspan="3">Нормы на</td>
                    
                </tr>
                <tr>
                    <td rowspan="2">Устройство покрытия пола</td>
                    <td colspan="2">Установка жилок</td>
                </tr>
                <tr>
                    <td>стеклянных</td>
                    <td>латунных</td>
                </tr>
                <tr>
                    <td>С прямолинейным рисунком жилками длиной до 3 м на 1м2 пола или с рисунком в шашку</td>
                    <td>0,8/10
                    </td>
                    <td>0,12/66</td>
                    <td>0,16/50</td>
                </tr>
                <tr>
                    <td>С прямолинейным рисунком жилками длиной более 3 м на 1м2 пола или с криволинейным рисунком</td>
                    <td>1,0/8
                    </td>
                    <td>0,22/36,3</td>
                    <td>0,23/35</td>
                </tr>
            </tbody>
        </table>
</body>
</html>

Вот как выглядит код в браузере - фото:

@TeoBR · 06.12.2023, 13:49 **[ТС]**

Все равно спасибо за ответ. Правда у меня появились другие проблемы, которые я уже решил.
У меня в отдельном файле были прописаны "display:flex". и я не мог удалить это, потому что это у меня очень много одинаковых по оформлению страниц, к которым подключен этот файл и если я уберу display:flex, то все таблицы кроме 1 поедут.
Поэтому я сделал так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
       tr, td {
          border: rgb(64, 132, 60);
          border: 0.2px;
          border-style: outset;
        }
        table {
            display: table;
        }
 
        td {
            display: table-cell;
            justify-content: normal;
            width: auto;
        }
 
        tr {
            display: table-row;
            flex-direction: initial;
            justify-content: initial;
        }

@ivanov_333 · 06.12.2023, 13:58

Да, это хорошее решение! Отличная работа!

Вообще, если честно, я сначала удивился, зачем вам нужно использовать display: flex; при работе с таблицей, но я не хотел этого говорить, чтобы не влиять, если у вас есть свои соображения.

Новые блоги и статьи Все статьи Все блоги /
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, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@TeoBR 0 / 0 / 0 Регистрация: 20.05.2022 Сообщений: 5
	06.12.2023, 12:32 [ТС]
	Вот скриншот с генератора таблиц. 0

@TeoBR 0 / 0 / 0 Регистрация: 20.05.2022 Сообщений: 5
	06.12.2023, 12:34 [ТС]
	Вот. Миниатюры 0

@TeoBR 0 / 0 / 0 Регистрация: 20.05.2022 Сообщений: 5
	06.12.2023, 13:00 [ТС]
	Спасибо, огромное. Хотя на сайте убирал флексы, у меня все равно почему-то не работало. Спасибо за помощь! 0

@ivanov_333 202 / 126 / 25 Регистрация: 09.01.2022 Сообщений: 458
	06.12.2023, 13:58
	Да, это хорошее решение! Отличная работа! Вообще, если честно, я сначала удивился, зачем вам нужно использовать display: flex; при работе с таблицей, но я не хотел этого говорить, чтобы не влиять, если у вас есть свои соображения. 1

Не работает rowspan и colspan

Решение