Jump to content
  • 0

Уникальная ширина первой ячейкм таблицы


sktemp
 Share

Question

У меня есть таблица. Ширина каждой ячейки, кроме первой, равна 151px. А у первой должна быть 14px. Таблица имеет id="apa".

Я пишу свойство CSS

#apa td{
padding: 0;
width: 151px;
}

Первой ячейке я пишу class="first"


.first{
width:14px;
}

Почему ширина не применяется? В FireBug пишется, что браузер его видит, но даёт приоритет ширине 151px. Как сделать так, чтобы ширина применялась корректно? Можно ли сделать без класса?

Edited by sktemp
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
Почему ширина не применяется?

У первого правила спецефичность выше.

Как сделать так, чтобы ширина применялась корректно? Можно ли сделать без класса?

#apa td:first-child

Edited by Helis
Link to comment
Share on other sites

  • 0

А так?

tr td:first-child {width:14px;}

А так работает. Спасибо.

Почему ширина не применяется?

У первого правила спецефичность выше.

А если мне надо будет установить ширину не первой ячейки? Есть ли способ без использования CSS3?

Link to comment
Share on other sites

  • 0
У первого правила спецефичность выше.

Там не только в специфичности дело. Класс, похоже, назначен был только одной ячейке, а у всех остальных ячеек в этом столбце стоит ширина 151 пиксель :)

А так да, #apa в своем примере я пропустил :)

А если мне надо будет установить ширину не первой ячейки? Есть ли способ без использования CSS3?

Не назначайте ширину глобально для всех ячеек (td). Достаточно повесить классы на ячейки в первой строке (tr) и назначить ширину уже им.

Link to comment
Share on other sites

  • 0
У первого правила спецефичность выше.

Там не только в специфичности дело. Класс, похоже, назначен был только одной ячейке, а у всех остальных ячеек в этом столбце стоит ширина 151 пиксель :)

Да. И почему так не работает? Я ожидал, что назначив всем ячейкам ширину, а дав класс первой, будет к ней применено свойства класса. Так и произошло. Все свойства были применены, кроме ширины. Отчего так? Ширина чем-то особенное свойство?

Link to comment
Share on other sites

  • 0

Да. И почему так не работает? Я ожидал, что назначив всем ячейкам ширину, а дав класс первой, будет к ней применено свойства класса. Так и произошло. Все свойства были применены, кроме ширины. Отчего так? Ширина чем-то особенное свойство?

Потому что ширина ячейки влияет на ВСЕ ячейки в столбце. Например, в столбце десять ячеек с шириной 100 пикселей (ширина задана всем ячейкам). Нельзя просто так взять и поменять ширину столбца, изменив ширину одной ячейки из десяти :) А если бы остальным ячейкам в столбце ширину не назначили, то сработало бы назначение ширины любой ячейке в столбце.

Link to comment
Share on other sites

  • 0

Да. И почему так не работает? Я ожидал, что назначив всем ячейкам ширину, а дав класс первой, будет к ней применено свойства класса. Так и произошло. Все свойства были применены, кроме ширины. Отчего так? Ширина чем-то особенное свойство?

Потому что ширина ячейки влияет на ВСЕ ячейки в столбце. Например, в столбце десять ячеек с шириной 100 пикселей (ширина задана всем ячейкам). Нельзя просто так взять и поменять ширину столбца, изменив ширину одной ячейки из десяти :) А если бы остальным ячейкам в столбце ширину не назначили, то сработало бы назначение ширины любой ячейке в столбце.


<table id="apa">
<tr>
<td class="first"></td><td></td><td></td>
</tr>
</table>

Я говорю всем сделать 151 пиксель, но классу first 14. Где я заблуждаюсь?

Edited by sktemp
Link to comment
Share on other sites

  • 0


<table id="apa">
<tr>
<td class="first"></td><td></td><td></td>
</tr>
</table>

Я говорю всем сделать 151 пиксель, но классу first 14. Где я заблуждаюсь?

В этом случае Helis уже все рассказал :) Правило "#apa td" имеет большую специфичность, чем ".first". Переопределить можно так: "#apa .first". Я использовал :first-child потому что решил, будто в таблице больше одной строки.

Нельзя просто так взять и поменять ширину столбца

http://makeyourmeme.ru/default/instance_32/986761/x_04936d84.jpg

Я дико извиняюсь.

Да, вот это и подразумевалось :)

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

×
×
  • 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