Jump to content
  • 0

Почему один стиль таблицы переобпределяет другой?

Vasler

Asked by Vasler,

 Share

Question

Vasler Explorer

Vasler

Posted
Posted (edited)

Почему такое происходит??

http://cssdeck.com/labs/oylyzxcb

Для каждого блока, содержащего таблицу, прописаны стили для этих таблиц, но почему то стиль для второй таблицы переопределяет стиль первой, хотя она даже не в том блоке! (у верхней шрифт должен выравниваться по центру, но выравнивается по левому блоку, согласно стилям для второй таблицы) Почему так получается?!

Edited by Vasler
Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
Xenia Wanger Explorer

Xenia Wanger

Posted
Posted (edited)

Зачем вы таблицу оборачиваете в див и диву задаете класс? Просто задайте класс таблице, и от этого уже отталкивайтесь. Незачем лишние вложенности делать.

http://cssdeck.com/labs/s50h2e7z

 

UPD: По сути, у второй таблицы незачем указывать бордеры, раз их нет вообще

Edited by Xenia Wanger
Link to comment
Share on other sites
  • 0
Vasler Explorer

Vasler

Posted
  • Author
Posted (edited)
  On 2/26/2014 at 7:34 AM, Xenia Wanger said:

Зачем вы таблицу оборачиваете в див и диву задаете класс? Просто задайте класс таблице, и от этого уже отталкивайтесь. Незачем лишние вложенности делать.

http://cssdeck.com/labs/s50h2e7z

 

UPD: По сути, у второй таблицы незачем указывать бордеры, раз их нет вообще

Я не оборачиваю конкретно таблицу, это просто блок с контентом, он должен быть, а в нем уже лежит таблица. Вообще даже если вот так http://cssdeck.com/labs/ikktxljp первый стиль прописан вообще для всех таблиц, а второй только для определенного класса, но он все равно влияет на первую таблицу (выравнивает текст влево), хотя у нее этого класса вовсе не прописано. Я не могу понять пересечение и связь, как такое получается!

Edited by Vasler
Link to comment
Share on other sites
  • 0
Xenia Wanger Explorer

Xenia Wanger

Posted
Posted
  On 2/26/2014 at 8:16 AM, Vasler said:

 

  On 2/26/2014 at 7:34 AM, Xenia Wanger said:

Зачем вы таблицу оборачиваете в див и диву задаете класс? Просто задайте класс таблице, и от этого уже отталкивайтесь. Незачем лишние вложенности делать.

http://cssdeck.com/labs/s50h2e7z

 

UPD: По сути, у второй таблицы незачем указывать бордеры, раз их нет вообще

Я не оборачиваю конкретно таблицу, это просто блок с контентом, он должен быть, а в нем уже лежит таблица. Вообще даже если вот так http://cssdeck.com/labs/ikktxljp первый стиль прописан вообще для всех таблиц, а второй только для определенного класса, но он все равно влияет на первую таблицу (выравнивает текст влево), хотя у нее этого класса вовсе не прописано. Я не могу понять пересечение и связь, как такое получается!

 

 

Я наглядно показала, как правильно сделать. Зачем опять мудрите что-то?

Link to comment
Share on other sites
  • 0
Vasler Explorer

Vasler

Posted
  • Author
Posted

Xenia Wanger, да не получается так на практике! Ладно, а если вот так, смотрите, http://cssdeck.com/labs/o9tutic0 вроде все сделано как у вас да, стили прописаны для каждой таблицы, однако, почему текст выравнивается влево в обоих таблицах, а не только в нижней, как задано по стилю? Вы можете указать на зависимость? Ибо у меня уже в глазах от этих таблиц все плывет и я возможно не вижу очевидного?

Link to comment
Share on other sites
  • 0
Xenia Wanger Explorer

Xenia Wanger

Posted
Posted
  On 2/26/2014 at 8:55 AM, Vasler said:

Xenia Wanger, да не получается так на практике! Ладно, а если вот так, смотрите, http://cssdeck.com/labs/o9tutic0 вроде все сделано как у вас да, стили прописаны для каждой таблицы, однако, почему текст выравнивается влево в обоих таблицах, а не только в нижней, как задано по стилю? Вы можете указать на зависимость? Ибо у меня уже в глазах от этих таблиц все плывет и я возможно не вижу очевидного?

 

уберите tbody в стилях

Link to comment
Share on other sites
  • 0
Vasler Explorer

Vasler

Posted
  • Author
Posted

Xenia Wanger, хорошо, это вроде бы решает мою тотальную проблему, я вас очень благодарю, большое спасибо! А не могли бы вы разъяснить, отчего стили tbody имеют такой приоритет? Всегда так получается, или моя конструкция была выстроена так криво? 

Link to comment
Share on other sites
  • 0
Vasler Explorer

Vasler

Posted
  • Author
Posted

Вобщем, сколько не читал, не могу понять логики поведения таблиц, это полностью бредовые элементы! Вот можете подсказать, почему тут рамка вообще отсутствует а таблица не растягивается по всей ширине, хотя стоит width: 100%?? http://cssdeck.com/labs/65jesmme

Link to comment
Share on other sites
  • 0
Aleksandr.L Explorer

Aleksandr.L

Posted
Posted (edited)
  On 3/1/2014 at 9:55 PM, Vasler said:

Вобщем, сколько не читал, не могу понять логики поведения таблиц, это полностью бредовые элементы! Вот можете подсказать, почему тут рамка вообще отсутствует а таблица не растягивается по всей ширине, хотя стоит width: 100%?? http://cssdeck.com/labs/65jesmme

facepalm.gif Вы вообще видели селектор?

.rob table {  border: solid 1px #333;  width: 100%;}

Уберите table либо .rob. А то получается абра-кадабра.

 

Чтобы границы появились — нужно еще не забывать про тег <td>:

.rob, td {  border: 1px solid #333;}
Edited by Aleksandr.L
Link to comment
Share on other sites
  • 0
Vasler Explorer

Vasler

Posted
  • Author
Posted (edited)

Жесть. Никогда не работал с таблицами, жуткая штука оказалось для моего понимания :wacko:

Aleksandr.L, спасибо за совет! Кончено, получилось. Так выходит, table в стилях можно вообще не указывать? И еще вопрос в догонку, как установить ширину ячеек, но что бы таблица также растягивалась на 100%?

Edited by Vasler
Link to comment
Share on other sites
  • 0
Aleksandr.L Explorer

Aleksandr.L

Posted
Posted
  On 3/2/2014 at 5:36 AM, Vasler said:
И еще вопрос в догонку, как установить ширину ячеек, но что бы таблица также растягивалась на 100%?

 

Вы имеете ввиду чтобы все ячейки были одинаковой ширины, но таблица при этом растягивалась на 100%? 

Link to comment
Share on other sites
  • 0
Vasler Explorer

Vasler

Posted
  • Author
Posted
  On 3/2/2014 at 10:21 PM, Aleksandr.L said:

 

  On 3/2/2014 at 5:36 AM, Vasler said:
И еще вопрос в догонку, как установить ширину ячеек, но что бы таблица также растягивалась на 100%?

 

Вы имеете ввиду чтобы все ячейки были одинаковой ширины, но таблица при этом растягивалась на 100%? 

 

Да да, именно так

Link to comment
Share on other sites
  • 0
Vasler Explorer

Vasler

Posted
  • Author
Posted (edited)
  On 3/4/2014 at 5:27 AM, Switch74 said:

тогда лучше сделать это или дивами или вложенными дивами в таблице

Возможно, но я просто думал что с таблицами это можно осуществить и без лишних изощрений. Но, выходит что нет?..

Edited by Vasler
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