HTML, Chrome, Вложенные таблицы - помогите сформулировать вопрос

← →
DayGaykin © (2015-11-10 19:07) [0]

Вот пример, который демонстрирует проблему:

http://vilker.ru/tables/

Почему-то, для такой таблицы Chrome переносит строки во вложенной таблице:
<table> <tr> <td>col 1</td><td>col 2</td><td style="width: 1px"></td> </tr> <tr> <td></td> <td colspan="2"> <table> <tr> <td>Long-long col 1</td> <td>Long-long col 2</td> </tr> </table> </td> </tr> </table>
Тут важны оба факта: наличие "узкой" ячейки и наличие ячейки перед объединенной.

Может кто-то сталкивался и решил или понимает как поискать? Я пробовал по разному - не обнаружил ничего похожего.

← →
Kerk © (2015-11-10 19:24) [1]

Надо в отладчике смотреть.
Важны там не столько значения width, сколько margin и padding.

← →
Kerk © (2015-11-10 19:26) [2]

Я хромом не пользуюсь, но там должны быть аналогичные средства https://yadi.sk/i/oLaT2es4kN4QD

← →
DayGaykin © (2015-11-10 20:29) [3]

> Kerk © (10.11.15 19:26) [2]

Действительно, если убрать у всех ячеек padding - строки выравниваются. Но это не вариант, к сожалению.

← →
Kerk © (2015-11-10 20:36) [4]

Тогда не знаю что предложить
.
Попробуй white-space: nowrap
Или с другими значениями поиграйся
http://htmlbook.ru/css/white-space

← →
DVM © (2015-11-10 22:18) [5]

> DayGaykin ©

Попробуй замени пробел по которому переносится на

← →
DVM © (2015-11-10 22:19) [6]

Мда...Неразрывный пробел походу даже в виде текста на форум не запостить. Короче, погугли про неразрывный пробел и замени на него.

← →
DVM © (2015-11-10 22:24) [7]

А вообще вот так проще:

<table> <tr> <td>col 1</td><td>col 2</td><td style="width: 1px"></td> </tr> <tr> <td></td> <td colspan="2"> <table> <tr> <td nowrap>Long-long col 1</td> <td nowrap>Long-long col 2</td> </tr> </table> </td> </tr> </table>

← →
DayGaykin © (2015-11-11 01:32) [8]

Это тоже все, к сожалению, костыли и не подходит:
Если таблица все-же получится шире экрана, то переносы строк - меньшее зло, чем горизонтальный скрол.

На данный момент, я просто убрал первую ячейку, и немного изменил внешний вид. Ну и в поддержку хрома отправил сообщение.

← →
DVM © (2015-11-11 11:37) [9]

> DayGaykin © (11.11.15 01:32) [8]
> Это тоже все, к сожалению, костыли и не подходит:

Странный ты. Сам хочешь странного, но достичь этого странного хочешь без костылей.
Мы же уже обсуждали, чтобы таблица сидела как влитая везде, ее надо выводить либо как картинку либо как PDF. И не верстать в таблицах.
Вообще издревле (еще во времена Netscape Navigator 4) практиковался 100% надежный метод задать ширину какой то ячейки таблицы так, чтобы ни один браузер не смог ячейку сделать меньше ни при каких обстоятельствах - засунуть туда прозрачный gif 1x1 с указанием ширины изображения равной нужной ширине ячейки.

← →
DVM © (2015-11-11 11:39) [10]

> Ну и в поддержку хрома отправил сообщение.

Бесполезно, да и поведение хрома вполне себе нормальное.

← →
DayGaykin © (2015-11-11 12:28) [11]

> поведение хрома вполне себе нормальное.

А в FF и IE неправильное?

← →
Kerk © (2015-11-11 12:37) [12]

Оно не неправильное, оно разное. Браузеры всегда вели себя все чуть по-разному в деталях. И это сейчас еще стараются стандарты соблюдать, раньше намного хуже было.

А в чем твоя задача? Опиши чего хочешь достичь, может можно вообще без таблиц.

> Kerk © (11.11.15 12:37) [12]

Да это как раз таблица в прямом смысле. Для некоторых записей отображается вложенная таблица. Внешняя - это заявки, вложенные - это позиции в заявке.

Самая правая колонка внешней таблицы (желтым на рисунке) - колонка с кнопками, поэтому чтобы она занимала минмум месте я установил ей ширину в 1 точку (для таблиц это нормальный метод).

Ячейка слева (голубым на рисунке) - для красоты. (сейчас я решил проблему отказавшись от нее).

Делать одну таблицу, но более широкую - пробовал - не вариант - слишком много колонок - не влезает в экран.

Общепринятого шаблона для отображения таких вложенных данных я не нашел.
Сейчас остановился на таком варианте: http://vilker.ru/tables/table.png -

ellipsis не подойдет?

А что если ячейку слева заменить на padding-left в следующей ячейке?

> Да это как раз таблица в прямом смысле.

> Самая правая колонка внешней таблицы (желтым на рисунке)
> - колонка с кнопками

Это называется табличная верстка, это не таблица в прямом смысле. Это использование таблицы для форматирования/верстки

> Kerk © (11.11.15 13:08) [15]
> А что если ячейку слева заменить на padding-left в следующей
> ячейке?

Примерно так и сделал!

Спасибо!

HTML, Chrome, Вложенные таблицы - помогите сформулировать вопрос Найти похожие ветки