Ширина ячеек таблицы

The_Immortal · November 6, 2013

Всех приветствую!

Друзья, помогите, пожалуйста, понять в чем проблема.

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>cell width</title>  <style>   td {     border: 1px solid;   }  </style> </head> <body>     <table>   <tr>     <td width=300>Cell1</td>    <td width=50>Cell2</td>   </tr>  </table>  </body></html>

На выходе: 06-11-2013%2012-35-25.png

Собственно, вопрос: откуда получается ширина размером в 304px, когда она задается 300px.

Спасибо!

Edited November 6, 2013 by The_Immortal

rus · November 6, 2013

для начала надо бы родителю (table) задать ширину, что бы отталкиваясь от него, потомки правильно отображали ширину.

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

The_Immortal · November 6, 2013

rus,

для начала надо бы родителю (table) задать ширину

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>cell width</title>  <style>   td {     border: 1px solid;   }  </style> </head> <body>     <table width="350">   <tr>     <td width=300>Cell1</td>    <td width=50>Cell2</td>   </tr>  </table>  </body></html>

Сделал: 06-11-2013%2012-51-32.png

Еще непонятнее стало...

не упускайте из виду паддинги, маржины

Дык они же по умолчанию 0... Разве нет?

Edited November 6, 2013 by The_Immortal

rus · November 6, 2013

нет, самый простой сброс это:

* {margin: o;padding: 0;}

для таблицы можно еще:

table {border: none;border-collapse: collapse;}

к тому же у td стоит бордер - 1px, да и визуально видно, что между ячейками есть отступ.

npofopr · November 6, 2013

Самый простой способ уже узнать что такое фаербаг/ веб-инспектор. Там же все сразу наглядно видно.

Нажать F12 не так сложно.

The_Immortal · November 6, 2013

rus,

npofopr,

благодарю за подсказку!

Однако осталось еще пару вопросов.

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>cell width</title>  <style>   * {    margin: 0;    padding: 0;   }   table {    border: none;    border-collapse: collapse;   }   td {    border: 1px solid;   }  </style> </head> <body>     <table width=350>   <tr>    <td width=300>Cell1</td>    <td width=50>Cell2</td>   </tr>  </table> </body></html>

1. При наведении Firebug'ом на td маркером выделяется ячейка, но без учета border'а. Получается ширина ячейка не включает в себя border. Это действительно так?

2. 11.06.2013-14.27.png Почему правый бордер первой ячейки (или это левый бордер второй ячейки?) закрывается на позиции 299px, а не на 300/301px? Такое ощущение, что приоритет по ширине отдается второй ячейке...

Edited November 6, 2013 by The_Immortal

npofopr · November 6, 2013

http://htmlbook.ru/css/width

The_Immortal · November 6, 2013

npofopr, оказывается читать иногда полезно))

Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Правда, это как-то противоречит вот этому:

Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.

Ну да ладно. Firebug, вероятно, показывает по умолчанию.

Благодарю!

Но вот ответа на второй вопрос не нашел...

2. Почему правый бордер первой ячейки (или это левый бордер второй ячейки?) закрывается на позиции 299px, а не на 300/301px? Такое ощущение, что приоритет по ширине отдается второй ячейке...

Edited November 6, 2013 by The_Immortal

rus · November 6, 2013

читать и в самом деле полезно: http://htmlbook.ru/css/border-collapse

The_Immortal · November 6, 2013

rus,

читать и в самом деле полезно: http://htmlbook.ru/css/border-collapse

Эм... И? :-)

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Про это я в курсе. Как это связано с моим вопросом:

Почему правый бордер первой ячейки закрывается на позиции 299px, а не на 300/301px? Такое ощущение, что приоритет по ширине отдается второй ячейке...

?

Edited November 6, 2013 by The_Immortal

rus · November 7, 2013

это столь важно?

давайте кое-что проясним:

таблица с внешней границей (бордером), а ячейки (к примеру) без бордеров - тут вроде все понятно:

ширина всей таблицы - 350px;

рамка добавляет ей с левого и правого боку по 1px;

итого, ширина таблицы уже не 350px, а 352px, верно?

а теперь проанализируем внутренние элементы таблицы - ячейки (td):

ширина первой ячейки: 300px;

ширина второй ячейки: 50px;

между ними бордер толщиной в 1px;

каким образом бордер встанет ровно между ними, когда ширина таблицы 350px, а не 351px?

и следующий вопрос: а какая собственно разница с какой ячейки ему заимствовать этот самый 1px?

то что вы обратили на это внимание - это возможно и полезно, потому как я лично ни разу не обращал внимание на подобные мелочи, впрочем как и на то, что (к примеру) в позиционировании - связка (top...; left... оказывается сильнее чем (right...; bottom;) - для меня это было новостью!

я пытался переопредилить стили для подгружаемого html и столкнулся вот с такой проблемой, но слава богу есть всемогущий js

The_Immortal · November 7, 2013

rus,

каким образом бордер встанет ровно между ними, когда ширина таблицы 350px, а не 351px?

Да! Вы поняли о чем я :-)

и следующий вопрос: а какая собственно разница с какой ячейки ему заимствовать этот самый 1px?

Не знаю, мне вот стало интересно... и обидно за первую ячейку, т.к. в данной ситуации именно у нее и позаимствовали этот пиксель. А почему именно так и где это описано (ровно как и про "top...; left...; сильнее чем right...; bottom;") - непонятно...

Ну да Бог с ним :-)

Я извиняюсь, но все-таки Вы не могли бы пояснить как это:

Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

соответсвует вот этому:

Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.

Речь идет про width.

Если бы мне не порекомендовали Firebug, то я и не задался этим вопросом. Но когда я увидел вот это:

07-11-2013%2012-38-03.png

, то мне стало непонятно, а где же

ширина блока получается сложением значений width, padding, margin и border.

На скрине явно видно, что Firebug под шириной блока бордеры не учитывает (рамка вокруг ячейки не выделена).

Вопрос: почему?

давайте кое-что проясним: таблица с внешней границей (бордером), а ячейки (к примеру) без бордеров - тут вроде все понятно: ширина всей таблицы - 350px; рамка добавляет ей с левого и правого боку по 1px; итого, ширина таблицы уже не 350px, а 352px, верно?

Эм... Давайте проясним. Если ширина таблица задана 350px, то она и останется 350px, не смотря на наличие бордеров. Область без бордеров (уж не знаю как ее обозвать) будет равна 348px. А вот как Вы получили 352px мне не ясно. Или Вы это для меня так интерпретировали?

Edited November 7, 2013 by The_Immortal

Sign In

Ширина ячеек таблицы

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information