Как обойти поведение тега "table"?

Веб-мастеринг

19.08.21

✎

14:27

Если активно использовать объединение ячеек, то строки таблицы могут "схлопнуться". Вот простейший пример, таблица на 2 колонки и 3 строки:

<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 не должна быть здесь!)</div>
</td>
</tr>
</tbody>
</table>

Если вставите этот кусок в браузер, увидите, что одной строки не хватает. Она исчезла из за "эффективной" оптимизации. Кому лень проверять, таблица на выглядит вот так:
-----------------------------------------------------------------------------------------
| R1C1:R2C1 (row 1) | R1C2 (row 1) |
-----------------------------------------------------------------------------------------
| R3C1 (row 3 не должна быть здесь!) | R2C2:R3C2 (row 2) |
-----------------------------------------------------------------------------------------

Скорее всего, это никак не обойти, поэтому нужен аналог тега table. Какие есть варианты? Цель - показывать на сайте отчеты, те что Excel

1 polosov

19.08.21

✎

14:36

https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables

2 Sabre

19.08.21

✎

14:44

(1) Даже близко не рядом к проблеме

3 polosov

19.08.21

✎

14:47

(2) Ближе, чем ты думаешь.

4 polosov

19.08.21

✎

14:52

(2) Я бы обратил внимание на свойство table-layout. Сайтошлепы меня поправят.

5 Sabre

19.08.21

✎

15:02

Сохранил табличный документ в html средствами 1с и глянул под капот. Кое что поправил, чтобы видно было. Тоже не айс, но хотя бы работает:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=utf-8">
<TITLE></TITLE>
<STYLE TYPE="text/css">
body { background: #ffffff; margin: 0; font-family: Arial; font-size: 8pt; font-style: normal; }
tr.R0{ height: 25px; }
tr.R0
td.R0C0{ text-align: center; vertical-align: middle; border-left: #000000 1px solid; border-top: #000000 1px solid; border-bottom: #000000 1px solid; border-right: #000000 1px solid; }
table {table-layout: fixed; padding: 0px; padding-left: 2px; vertical-align:bottom; border-collapse:collapse;width: 100%; font-family: Arial; font-size: 8pt; font-style: normal; }
td { padding: 0px; padding-left: 2px; overflow:hidden; }
</STYLE>
</HEAD>
<BODY STYLE="background: #ffffff; margin: 0; font-family: Arial; font-size: 8pt; font-style: normal; ">
<TABLE style="width:100%; height:0px; " CELLSPACING=0>
<COL WIDTH=63>
<COL WIDTH=63>
<TR CLASS=R0>
    <TD CLASS="R0C0" ROWSPAN=2>1</TD>
    <TD CLASS="R0C0">2</TD>
</TR>
<TR CLASS=R0>
    <TD CLASS="R0C0" ROWSPAN=2>4</TD>
    <TD CLASS="R0C0">4-1</TD>
</TR>
<TR CLASS=R0>
    <TD CLASS="R0C0">3</TD>
    <TD CLASS="R0C0">3-1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

6 Asmody

19.08.21

✎

15:15

Лучший способ обойти поведение тега <table> - не использовать тег <table>

https://replit.com/@Asmody/TrustingOrderlyFreesoftware#index.html

7 Вафель

19.08.21

✎

15:40

а почему во 2 строке только 1 колонка?

8 Вафель

19.08.21

✎

15:43

ты так хотел?

9 Вафель

19.08.21

✎

15:43

https://i.imgur.com/alXnplf.png

10 Метрополь

19.08.21

✎

15:51

(0) Очень просто. Не используй тег table. Это считается дурным тоном. Так только школьники и студенты делают.

11 Вафель

19.08.21

✎

15:53

(10) ... и миста

12 polosov

19.08.21

✎

15:55

(10) Ну не нужны ему может быть разные масштабы. Просто чтобы у 2,5 сотрудников в хроме выводилась табличка.

13 Garykom

гуру

19.08.21

✎

15:55

(0) нахрен тебе table?
используй div

14 Fragster

гуру

19.08.21

✎

15:56

(8) судя по всему - как-то так: https://i.imgur.com/FpfY2Ta.png

15 Fragster

гуру

19.08.21

✎

16:02

(10) тег table нужен для отображения табличных данных. для лэйаута - он действительно не нужен

16 ДенисЧ

19.08.21

✎

16:02

Зачем тебе table? Используй grid, на худой конец flex...

17 Fragster

гуру

19.08.21

✎

16:04

елки иголки, сохранил эксель в html, открыл блокнотом...

18 Fragster

гуру

19.08.21

✎

16:04

300 строк js из (14) и ни одного - html

19 Вафель

19.08.21

✎

16:05

с гридом конечно все просто
grid-template-areas:
            "a b"
            "a c"
            "d c";

20 Вафель

19.08.21

✎

16:08

(18) там же реакт какой или аналог

21 Метрополь

19.08.21

✎

16:25

(11) На мисте использование табличной верстки сложилось исторически, и тянется с древних времен, как традиция. Может быть в этом что-то есть. Пусть будет, меня устраивает.

22 Метрополь

19.08.21

✎

16:27

(15) Тег "table" не нужен ни для чего, от слова чего. Он устарел.

23 Fragster

гуру

19.08.21

✎

16:38

(22) нет

24 Fragster

гуру

19.08.21

✎

16:39

не хватает только высоты, если надо как в (14): https://jsfiddle.net/mq5L96bu/

25 Вафель

19.08.21

✎

17:02

А если там не нужен BR ?

26 Метрополь

19.08.21

✎

17:05

(23) Ты не шаришь.

27 Fragster

гуру

19.08.21

✎

17:11

(26) ну ну

28 Fragster

гуру

19.08.21

✎

17:12

(25) тогда увеличь высоту ячейки любым другим способом

29 Fragster

гуру

19.08.21

✎

17:12

не понятно только - то ли это, что нужно автору

30 Sabre

20.08.21

✎

06:05

(29) Мне нужно выводить плоские отчеты (список, кросс-таблица) в браузере. Поэтому ячейки таблицы должны быть фиксированными и предсказуемыми. Передаю таблицу в json, браузер показывает. Все счастливы.

31 Sabre

20.08.21

✎

06:39

Сейчас на свежую голову покопался в этом, выяснил, что если с верхних строк до текущей строки таблицы "дотягиваются" объединенные ячейки, то они вставляются между ячейками текущей строки, выталкивая их вправо:

-------------
| 1 | 2 | 3 |
---- ----
| 1 | | 2 | 3 |
-------------

32 Fragster

гуру

20.08.21

✎

10:28

(31) ну, это соответствует спецификации