Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Согласовать ширину колонок вложенной и внешней таблиц  [new]
neznajka
Member

Откуда: Łódź, Polska
Сообщений: 407
Собственно, сабж.
Тут уже обсуждались подобные моменты, только я не смог адаптировать их к моему случаю.
Опытным путём мне удалось подобрать соотношение ширин интересующих колонок обеих таблиц (как в прилагаемом в архиве файле style_my.css), но эта временная гармония нарушается при масштабировании окна браузера (Ctrl+ или Ctrl-)
Кроме того, после такого подбора габаритов колонок нельзя использовать правило
Width: 100%
для внешней и внутренней таблицы - это сразу же расстраивает согласование ширины внешних и внутренних колонок :(
Знаю, что можно это как-то урегулировать, вставляя div'ы в ячейки - но это я оставил на крайний случай, если уж без совсем никак не получится.
Мне это нужно для программного формирования статических табличных html-страниц, пригодных для открывания не тольков браузере, но и в Excel'е и в Word'е. Чтобы таблицы при этом выглядели более-менее похоже.
Прошу подсказать, можно ли средствами html+css согласовать габариты колонок внешней и внутренних таблиц (их в реальном примере будет 3, тут я привожу для упрощения только 1), не подбирая каждый раз эти габариты вручную и чтобы на это не влияло изменение масштаба окна браузера?

К сообщению приложен файл (primer.zip - 1Kb) cкачать
25 ноя 21, 22:17    [22400957]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
создай тут https://jsfiddle.net/ и сюда ссылку.
25 ноя 21, 22:37    [22400967]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
neznajka
Member

Откуда: Łódź, Polska
Сообщений: 407
Вот ссылка: https://jsfiddle.net/jro3tpc5/
Или так
Правда, там снова колонки выглядят невыровненными, поскольку ширина экрана просмотра другая, для неё нужно снова габариты колонок подбирать :(
25 ноя 21, 22:54    [22400972]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
neznajka
Вот ссылка: https://jsfiddle.net/jro3tpc5/
Или так
Правда, там снова колонки выглядят невыровненными, поскольку ширина экрана просмотра другая, для неё нужно снова габариты колонок подбирать :(
я б использовал css переменные. либо грид
25 ноя 21, 23:16    [22400978]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
neznajka
Member

Откуда: Łódź, Polska
Сообщений: 407
Спасибо, Вадя - насчёт css-переменных я почитаю, посмотрю, с чем их едят :)
А гриды мне точно не подходят (если речь о grid-layout) - ни Excel, ни Word их не воспринимают как нормальную таблицу, я проверял.
25 ноя 21, 23:25    [22400982]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
voraa
Member

Откуда:
Сообщений: 299
neznajka,
А зачем внутренняя таблица?
Используйте rowspan и colspan
26 ноя 21, 07:58    [22401062]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
voraa
А зачем внутренняя таблица?
Используйте rowspan и colspan
тем более что уже используешь
26 ноя 21, 20:08    [22401500]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
neznajka
Member

Откуда: Łódź, Polska
Сообщений: 407
вадя, voraa:
Да, я использовал rowspan в более простых таблицах и заголовках. Но для программного создания сложных таблиц мне это не подошло. Сейчас попытаюсь объяснить, хотя это не так просто описать.
В одной моей реальной таблице, например, на сегодня - 17 колонок и 254 строки, часть из которых должны быть объединены через rowspan. При этом, если, например, во второй строке 2-я, 3-я и 4-я колонки должны иметь rowspan=2, 12-я и 13-я должны иметь rowspan=3, а 16-я - rowspan=5, то для сохранения ПРОПОРЦИОНАЛЬНОЙ высоты каждой строки слишком сложно запрограммировать последовательность и количество <td> в каждой нижеследующей строке - в конце-концов получается жуткая мешанина и перестаёт быть понятным, какой <td> к какой именно колонке относится (Ибо речь идёт именно о rowspan в НЕсмежных колонках).
Пробовал делать это через online-конструктор - тогда структура таблицы получается правильной, но высота за-rowspan-енных строк получается непропорциональной их фактическому количеству. Да и rowspan-ы получаются какими-то странными - для вышеприведённого случая (rowspan = 2,3,5), например, откуда-то браузер при отображении берёт значения 4 и 5, и даже 8. Хотя для соблюдения пропорциональной высоты объединённых строк, по-моему, логично было бы исходить из их наименьшего общего кратного (30) - соответственно rowspan = 15,10,6, а для ячеек в остальных (однострочных) колонках - rowspan=30.
Таким образом, запрограммировать каждое возможное сочетание различных rowspan-ов в нескольких несмежных колонках мне показалось неоправданно сложным.
А вот программировать создание вложенных таблиц в моей ситуации оказалось гораздо легче, и даже кое-что уже получилось :) Мне осталось только "побороть" нарушение согласованности ширины столбцов при изменении масштаба окна браузера.
26 ноя 21, 22:52    [22401559]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
voraa
Member

Откуда:
Сообщений: 299
neznajka,
Попробуйте классы сложных ячеек задать так.
.w123 {
	width: 121px;
  min-width: 121px;
}
.w1 {
	width: 80px;
  min-width:80px;
}
.w2 {
	width: 26px;
  min-width:26px;
}
.w3 {
	width: 40px;
  min-width:40px;
}
27 ноя 21, 00:06    [22401585]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
voraa
Member

Откуда:
Сообщений: 299
Можно в крайнем случае зафиксировать какую то приемлемую ширину всей таблицы, что бы она не менялась
Получится, например 850px, ну и задайте так.
Горизонтальный скроллинг все равно и так получается.
27 ноя 21, 00:23    [22401597]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
neznajka,
надо только один раз подумать очень-очень хорошо, получится алгоритм и будет. работать.
делал подобное.
с. вложенными таблицами - похоже на велосипед.....
27 ноя 21, 07:17    [22401654]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
ShSerge
Member

Откуда: ʚонɔ dиw
Сообщений: 25208
neznajka,

А Вы не пробовали рантайм-стили?
Ну, это в яваскрипт.
27 ноя 21, 08:18    [22401658]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 19509
neznajka,

тут надо начать построение таблицы в sql-запросе, где уже предусмотреть необходимые поля , информирующие о количествах строк, и прочих данных для построения таблицы без доп таблиц.
27 ноя 21, 10:04    [22401680]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
neznajka
Member

Откуда: Łódź, Polska
Сообщений: 407
To voraa - да, именно указание фиксированной ширины главной таблицы в сочетании с min-width для ячеек привело к наиболее приемлемому результату. Спасибо!
Также вставка фиксированных по ширине div-ов оказалась вторым способом решения для моего случая.

То ShSerge: я, пожалуй, обратился бы к javascript-у, если бы не удалось добиться результатов (пусть не идеальных, но вполне приемлемых) с помощью только html+css. Спасибо.

То вадя: программирование вложенных таблиц для меня оказалось более простым, поскольку мне так и не удалось уяснить принцип расстановки <td>-шек в НЕ-объединённых rowspan-ами колонках сложных таблиц (с маленькими таблицами примерно до 8х8 - всё понятно, а если ячеек намного больше - получается невообразимая каша, расхлёбывать которую нет ни желания, ни времени) - а без этого уяснения программный код в моём исполнении получается слишком громоздким и трудно-модернизируемым. Кроме того, выриант с вложенными таблицами является более гибким, если структура главной таблицы подвергается частым изменениям.
Всем большое спасибо за участие! Прошу считать вопрос решённым.

Сообщение было отредактировано: 27 ноя 21, 16:45
27 ноя 21, 16:44    [22401863]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
neznajka
Member

Откуда: Łódź, Polska
Сообщений: 407
То ALL: теперь даже при масштабировании работает идеально! И даже без div-ов :)
Ещё раз спасибо всем! Особая благодарность - voraa :))
27 ноя 21, 16:55    [22401873]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
neznajka
Member

Откуда: Łódź, Polska
Сообщений: 407
В продолжении темы - нарисовалась ещё одна проблема, только теперь уже с javascript-ом, который срабатывает почему-то лишь однократно.
Я сделал 2 кнопки (отключение и подключение файла стилей) и они нормально срабатывают, но лишь по одному разу. Помогите, пожалуйста, разобраться, как их заставить работать по каждому нажатию. Логика проста: подключение стилей должно срабатывать только в случае, если соответствующий файл ещё не подключен (опознаётся через id link-а), а отключение - должно срабатывать только в обратном случае.
К сожалению, мне не удалось продемонстрировать всё это на https://jsfiddle.net - там почему-то js-код вообще не хочет работать :(
А в локальном варианте - работает. Хоть и однократно.
Поэтому прилагаю html+css в виде zip-архива.
Посмотрите, пожалуйста. По-моему, я там не учёл каких-то "неявных подводных камней" javascript-a.

К сообщению приложен файл (problem.zip - 3Kb) cкачать
29 ноя 21, 00:05    [22402345]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
voraa
Member

Откуда:
Сообщений: 299
neznajka,
Начало htm так

<!doctype html>
<html>
<head>
<title>Тест</title><!--children[0]-->
  <link rel="stylesheet" href="reset_advanced.css" /><!--children[1]-->
  <link id="myCss" rel="stylesheet" href="style_my.css" /><!--children[2]-->
  <script>
    function addCss() {
        document.getElementById('myCss').disabled = false;
    }
    function remCss() {
        document.getElementById('myCss').disabled = true;
    }
  </script>
</head>
<body>
<button onclick="remCss()">отключить стили</button>
<button onclick="addCss();">подключить стили</button>


Остальное без изменений

Сообщение было отредактировано: 29 ноя 21, 08:05
29 ноя 21, 08:04    [22402382]     Ответить | Цитировать Сообщить модератору
 Re: Согласовать ширину колонок вложенной и внешней таблиц  [new]
neznajka
Member

Откуда: Łódź, Polska
Сообщений: 407
Спасибо большущее, voraa - всё кратко и гениально :)
По крайней мере - на фоне решений, найденных мной через Гугл и Яндекс. Я, собственно, оттуда и почерпнул приведённые мной в архивном вложении способы. Но предложенный вами - намного изящнее и эффективней, возьму его на вооружение. Ещё раз благодарю!
29 ноя 21, 22:10    [22402780]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить