Вход | Регистрация
 

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

Как обойти поведение тега "table"?
Я
   Sabre
 
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
   polosov
 
1 - 19.08.21 - 14:36
   Sabre
 
2 - 19.08.21 - 14:44
(1) Даже близко не рядом к проблеме
   polosov
 
3 - 19.08.21 - 14:47
(2) Ближе, чем ты думаешь.
   polosov
 
4 - 19.08.21 - 14:52
(2) Я бы обратил внимание на свойство table-layout. Сайтошлепы меня поправят.
   Sabre
 
5 - 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>
   Asmody
 
6 - 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
   Метрополь
 
10 - 19.08.21 - 15:51
(0) Очень просто. Не используй тег table. Это считается дурным тоном. Так только школьники и студенты делают.
   Вафель
 
11 - 19.08.21 - 15:53
(10) ... и миста
   polosov
 
12 - 19.08.21 - 15:55
(10) Ну не нужны ему может быть разные масштабы. Просто чтобы у 2,5 сотрудников в хроме выводилась табличка.
   Garykom
 
13 - 19.08.21 - 15:55
(0) нахрен тебе table?
используй div
   Fragster
 
14 - 19.08.21 - 15:56
(8) судя по всему - как-то так: https://i.imgur.com/FpfY2Ta.png
   Fragster
 
15 - 19.08.21 - 16:02
(10) тег table нужен для отображения табличных данных. для лэйаута - он действительно не нужен
   ДенисЧ
 
16 - 19.08.21 - 16:02
Зачем тебе table? Используй grid, на худой конец flex...
   Fragster
 
17 - 19.08.21 - 16:04
елки иголки, сохранил эксель в html, открыл блокнотом...
   Fragster
 
18 - 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" не нужен ни для чего, от слова чего. Он устарел.
   Fragster
 
23 - 19.08.21 - 16:38
(22) нет
   Fragster
 
24 - 19.08.21 - 16:39
не хватает только высоты, если надо как в (14): https://jsfiddle.net/mq5L96bu/
   Вафель
 
25 - 19.08.21 - 17:02
А если там не нужен BR ?
   Метрополь
 
26 - 19.08.21 - 17:05
(23) Ты не шаришь.
   Fragster
 
27 - 19.08.21 - 17:11
(26) ну ну
   Fragster
 
28 - 19.08.21 - 17:12
(25) тогда увеличь высоту ячейки любым другим способом
   Fragster
 
29 - 19.08.21 - 17:12
не понятно только - то ли это, что нужно автору
   Sabre
 
30 - 20.08.21 - 06:05
(29) Мне нужно выводить плоские отчеты (список, кросс-таблица) в браузере. Поэтому ячейки таблицы должны быть фиксированными и предсказуемыми. Передаю таблицу в json, браузер показывает. Все счастливы.
 
 
   Sabre
 
31 - 20.08.21 - 06:39
Сейчас на свежую голову покопался в этом, выяснил, что если с верхних строк до текущей строки таблицы "дотягиваются" объединенные ячейки, то они вставляются между ячейками текущей строки, выталкивая их вправо:

-------------
| 1 | 2 | 3 |
----     ----
| 1 |   | 2 | 3 |
-------------
   Fragster
 
32 - 20.08.21 - 10:28
(31) ну, это соответствует спецификации


Список тем форума
 
ВНИМАНИЕ! Если вы потеряли окно ввода сообщения, нажмите Ctrl-F5 или Ctrl-R или кнопку "Обновить" в браузере.