Jump to content
  • 0

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

The_Immortal

Asked by The_Immortal,

 Share

Question

The_Immortal Explorer

The_Immortal

Posted
Posted (edited)

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

 

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

<!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 by The_Immortal
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
rus Explorer

rus

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
The_Immortal Explorer

The_Immortal

Posted
  • Author
Posted (edited)

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 by The_Immortal
Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

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

* {margin: o;padding: 0;}

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

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

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

Link to comment
Share on other sites
  • 0
The_Immortal Explorer

The_Immortal

Posted
  • Author
Posted (edited)

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 by The_Immortal
Link to comment
Share on other sites
  • 0
The_Immortal Explorer

The_Immortal

Posted
  • Author
Posted (edited)

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

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

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

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

 

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

 

Благодарю!

 

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

 

2. Почему правый бордер первой ячейки (или это левый бордер второй ячейки?) закрывается на позиции 299px, а не на 300/301px? Такое ощущение, что приоритет по ширине отдается второй ячейке...
Edited by The_Immortal
Link to comment
Share on other sites
  • 0
The_Immortal Explorer

The_Immortal

Posted
  • Author
Posted (edited)

rus,

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

 

Эм... И? :-)

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

 

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

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

?

Edited by The_Immortal
Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
The_Immortal Explorer

The_Immortal

Posted
  • Author
Posted (edited)

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 by The_Immortal
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept