RussianGirl
-
Posts
3 -
Joined
-
Last visited
RussianGirl's Achievements
Explorer (1/14)
0
Reputation
-
Использование colspan делает таблицу на 1 пиксель шире
RussianGirl replied to RussianGirl's question in HTML Coding
Баг повержен! Правда, совершенно нелогичным методом. Удивляюсь, как он вообще пришел в мою голову. В общем, если в стиле первой таблицы прописать что-то типа border: 1px solid #FFFFFF (0px не прокатывает ), то ее ширина нормализуется. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <table style="border: 1px solid #FFFFFF; width: 400px; border-collapse: collapse"> <tr> <td style="border: 1px solid black" colspan="3"> </td> </tr> </table> <table style="width: 400px; border-collapse: collapse"> <tr> <td style="border: 1px solid black"> </td> </tr> </table> </body> </html> -
Использование colspan делает таблицу на 1 пиксель шире
RussianGirl replied to RussianGirl's question in HTML Coding
Не прокатит. В таблице есть пустые TR'ы-разделители, у которых не должно быть бордера. Сорри. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ================================================ Упрощенный пример: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <table style="width: 400px; border-collapse: collapse"> <tr> <td style="border: 1px solid black" colspan="3"> </td> </tr> </table> <table style="width: 400px; border-collapse: collapse"> <tr> <td style="border: 1px solid black"> </td> </tr> </table> </body> </html> Шире, и все тут! UPD: Конвертация таблицы в <div style="display: table"> не помогла. -
Дано: <div class="SECT"> <table class="TBL" cellspacing="0" cellpadding="0"> <tr class="TR"> <td class="DOC_T" colspan="4"> </td> </tr> <tr class="EMPTY"> <td colspan="4"> </td> </tr> <tr class="TR"> <td class="DOC_E"> </td> <td class="DOC_L"> </td> <td class="DOC_M"> </td> <td class="DOC_R"> </td> </tr> </table> </div> <div class="SECT"> <table class="TBL" cellspacing="0" cellpadding="0"> <tr class="TR"> <td class="DOC_T"> </td> </tr> <tr class="EMPTY"> <td> </td> </tr> </table> </div> div.SECT { margin: 15px 0 0 19px; } table.TBL { background-color: #DEDEEE; border-collapse: collapse; font: 12px Tahoma; text-align: left; width: 400px; } table.TBL a { font: 12px Tahoma; } table.TBL tr.TR { background-color: #EAEAFA; vertical-align: middle; } table.TBL tr.TR2 { background-color: #EAEAFA; vertical-align: middle; } table.TBL tr.EMPTY{ height: 6px; } td.DOC_E { background-color: #DEDEEE; width: 19px; } td.DOC_L { border: 1px solid #AAAAAA; padding: 3px 0 3px 1px; text-align: center; width: 24px; } td.DOC_M { border: 1px solid #AAAAAA; color: #777777; font-size: 11px; padding-left: 1px; text-align: center; width: 70px; } td.DOC_R { border: 1px solid #AAAAAA; padding: 2px 0 3px 7px; vertical-align: middle; } td.DOC_T { border: 1px solid #AAAAAA; border-left: 2px solid #7755FF; font: 11px Tahoma; padding: 4px 5px 5px 7px; text-transform: uppercase; } Результат: 1. Очевидно, что первая таблица на один пиксель шире (401px), чем вторая (400px). 2. Проблема наблюдается в Chrome и Safari. В IE, Opera и Firefox – все ОК. 3. Дело не в ширине таблиц: пробовал указывать как в пикселях, так и в процентах. 4. Дело не в обрамляющем таблицы div'е. 5. Дело, насколько мне удалось выяснить, в использовании colspan в сочетании с border-collapse: collapse. Ни от того, ни от другого отказаться не могу. Вопросы: WTF? Как исправить?