Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 59
не, ну зачем над трупом издеваться?)))) вроде и так уже все поняли, что такое ие6
Да дело то не в IE6 и не в рамках у ячеек. Дело в том, что браузеры не знают какую ставить ширину у ячеек в неочевидных ситуациях. Safari рендерит ближе к IE, Fox и Opera — по своему. Это создает проблемы. Мне было необходимо, чтобы ячейки имели наименьшую ширину.
почему тогда не отразить смысла поста в самом посте?
а вот из скрина ну ни разу не понятно, что вы имели ввиду. и уж тем более минусовать из-за этого коммент…
а вот из скрина ну ни разу не понятно, что вы имели ввиду. и уж тем более минусовать из-за этого коммент…
Спокойствие только спокойствие., вас валят ваши конкуренты. Я еще не успел никого заминусовать.
Выходит, надо задавать ширину…
поздравляю с инвайтом!
Попробуйте table-layout: fixed
Да никакой разницы, по крайней мере в FF и Safari.
Есть еще один момент: часто если таблица растянута (ширина в %), то для минимизации ширины ячейки указывают ширину в 1%. При использовании table-layout: fixed это приведет, очевидно, к «переполнению» ячейки.
считать IE6 современным браузером как-то неправильно, имхо
он, скорее, устаревший (хоть и широко, пока, используемый)
он, скорее, устаревший (хоть и широко, пока, используемый)
А почему там колспаны так странно наставлены?
Различный рендеринг таблиц современными браузерамиАга.
Firefox 3.5.2 MacЧто-то ваш фаерфокс подозрительно похож на сафари, сафари на оперу, а опера на фаерфокс. Хотя не спорю, с помошью скинов можно сделать все что угодно
Safari 4.0.2 Mac
Opera 9.64 Mac
Как мне кажется, логичнее всего поступают Опера и Фокс.
Две первые ячейки шире РОВНО на ту самую колонку, которой нет (+ бордюр). Теперь понятно, почему сдвигается нижняя ячейка.
А по поводу Сафари и Ие — что ж, пусть чинят.
Две первые ячейки шире РОВНО на ту самую колонку, которой нет (+ бордюр). Теперь понятно, почему сдвигается нижняя ячейка.
А по поводу Сафари и Ие — что ж, пусть чинят.
Логичнее, однако не понятно, почему бы не минимизировать ширину таблицы, если для этого есть возможность.
Если задать ячейкам ширину, то рендеринг в Safari и FF становится идентичным. Но тем не менее, ячейка с текстом test будет явно не 1% ширины. Сможете объяснить логику?
Если задать ячейкам ширину, то рендеринг в Safari и FF становится идентичным. Но тем не менее, ячейка с текстом test будет явно не 1% ширины. Сможете объяснить логику?
У вас в первой строке у всех ячеек длина по 1%. Тут уже что-то не то. Человек без бутылки не разберется, не знаю как там браузер.
Но если поставить в таком случае table-layout: fixed — получится примерно ожидаемое (Опера 10).
А вообще, лучше так не делайте. В трезвом уме с такими структурами не разберешься.
Но если поставить в таком случае table-layout: fixed — получится примерно ожидаемое (Опера 10).
А вообще, лучше так не делайте. В трезвом уме с такими структурами не разберешься.
Мда, что-то я там невнимательно понаделал — исправил
Структуры сложные, но и задача сложная.
а какой смысл в столбце, которого нет ни в одном ряде таблицы?
интересно было бы взглянуть на практический пример.
интересно было бы взглянуть на практический пример.
Пожалуйста, пример
господи… это называется «плохие браузеры не дают мне засунуть ноги за уши».
Вы меня простите, но в Вашем примере нет таблицы.
ru.wikipedia.org/wiki/%D0%A2%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B0
знал бы что топик про табличную верстку, даже не сунулся бы.
Вы меня простите, но в Вашем примере нет таблицы.
ru.wikipedia.org/wiki/%D0%A2%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B0
знал бы что топик про табличную верстку, даже не сунулся бы.
Это отнюдь не табличная верстка, простите так уже вышло.
На скриншоте кусок таблицы с данными.
На скриншоте кусок таблицы с данными.
тогда поясните, какие у приведенной таблицы заголовки колонок. по скриншоту это не ясно, впрочем как и не ясно как скриншот иллюстрирует приведенную в топике ситуацию.
в частности, у «пропавшего» столбца какая смысловая нагрузка. не повторяйтесь про границу — скажите какой смысл, какое название, у этого столбца.
>необходимость в «диагональной» вертикальной границе.
если Вы говорите о визуальной границе — это и называется табличная верстка, потому что Вы используете средство разметки данных (таблицу), для отрисовки оформления.
в частности, у «пропавшего» столбца какая смысловая нагрузка. не повторяйтесь про границу — скажите какой смысл, какое название, у этого столбца.
>необходимость в «диагональной» вертикальной границе.
если Вы говорите о визуальной границе — это и называется табличная верстка, потому что Вы используете средство разметки данных (таблицу), для отрисовки оформления.
У пропавшего столбца нет никакой нагрузки. Однако, я не смог найти другое решение реализации плавающей границы. У вас есть идеи?
У меня есть идея:
Это вы предлагаете убрать ячейки в серой полосе?
Да. Зачем там использовать туже самую таблицу, если эти строки ничем не связаны.
Обратите внимание, что заголовок у левого столбца — «Канал» и по нему можно сортировать, при этом логотипы могут быть разной ширины. Я решил проблему, вложив таблицу с собственно данными в белую нижнюю строку. Однако это полумера и идеальным решением назвать это нельзя, посколько мы потеряем колоночную связь между отдельными строками данных.
Топик, напомню, не про конкретное решение моей проблемы, а про то, как браузеры ведут себя в неочевидных ситуациях.
Топик, напомню, не про конкретное решение моей проблемы, а про то, как браузеры ведут себя в неочевидных ситуациях.
Ваше решение похоже на мое, единственное вы не обратили внимание с какими данными связан заголовок таблицы.
Но и ваше решение удаляет колоночную связь между отдельными группами (группа — это серая полоса), мое — между строками данных в группах.
Но и ваше решение удаляет колоночную связь между отдельными группами (группа — это серая полоса), мое — между строками данных в группах.
Причина появления такого столбца — необходимость в «диагональной» вертикальной границе.
Проблема в том что нет ни одной строки со всеми заполненными ячейками.
Обновил демо — проблемы не решило
Должна быть хоть одна строка, где все ячейки без colspan'ов
Примерно так:
<table>
<thead>
<tr>
<th>ff</th>
<th>ff</th>
<th>ff</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=«2»>ardgtardgaegaegag</td>
<td>ff</td>
</tr>
<tr>
<td colspan=«2»>dfggdsgdsfgfddfsav </td>
<td>ff</td>
</tr>
<tr>
<td>test</td>
<td colspan=«2»>ardgtardgaegaegag</td>
</tr>
</tbody>
</table>
* This source code was highlighted with Source Code Highlighter.
Без этого вряд ли получится получить желаемый результат.
Примерно так:
<table>
<thead>
<tr>
<th>ff</th>
<th>ff</th>
<th>ff</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=«2»>ardgtardgaegaegag</td>
<td>ff</td>
</tr>
<tr>
<td colspan=«2»>dfggdsgdsfgfddfsav </td>
<td>ff</td>
</tr>
<tr>
<td>test</td>
<td colspan=«2»>ardgtardgaegaegag</td>
</tr>
</tbody>
</table>
* This source code was highlighted with Source Code Highlighter.
Без этого вряд ли получится получить желаемый результат.
Да, некоторое улучшение ситуации действительно имеет место быть. Чем объясните пустоту в правых ячейках?
Добился нужного результата в FF с таким вариантом
Хотя сафари и вправду выдает отсебятину в ширине строк (в вашем и моем вариантах), во всех вариантах есть пустые места, которых в других браузерах не видно.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Различный рендеринг таблиц современными браузерами