width attribute of td is not overriding css width property

Question

I have searched about this pretty much and still not able to understand the reasong for the behaviour. I have a td element with width attribute specified and I also have specified the width in css class. But the width in css class is reflecting, doesn't the width attribute of element take higher priority?

Sample code:

<table class="sample">
  <tr>
    <td width="70%" class="cell">First cell</td>
    <td class="cell">Second cell</td>
  </tr>
</table>

Css

table.sample {
  border: 1px solid red;
  width: 100%;
}
td.cell {
  border: 1px solid black;
  width: 40%;
}

I understand that width attribute is deprecated and not advisable to use, I am trying to understand the behavior as I have to fix a similar issue, where I have many pages using the style td.cell but I need to override it in one page, I can go for style attribute that is one way, or define another style class.

score 2 · Accepted Answer · answered May 30 '13 at 07:32

From the CSS 2.1 spec

6.4.4 Precedence of non-CSS presentational hints

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

So CSS styles always out-rank presentational attributes in HTML.

score 1 · Answer 2 · answered May 30 '13 at 07:08

1

<table width="100%" class="sample">
  <tr>
    <td width="70%" class="cell">First cell</td>
    <td width="30%" class="cell">Second cell</td>
  </tr>
</table>

Css :-

table.sample {
  border: 1px solid red;
}
td.cell {
  border: 1px solid black;
}

answered May 30 '13 at 07:08

Archna Rangrej

664
3
14
38

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

When you write <td width="70%" class="cell">First cell</td> and once Browser will parse this line it will generate one column having property as width. but when you write like

<td style="width:70%" class="cell">First cell</td>

it will become one attribute of the style , Hence a kind of as you say inline CSS. So your External CSS cannot override it now.

try like this :-

<table class="sample">
  <tr>
    <td style="width:70%" class="cell">First cell</td>
    <td class="cell">Second cell</td>
  </tr>
</table>

Simply writing Width in mark up defines it as a property. So your Css is overriding this...

See this :- Difference between property and attribute
and this is the answer for your query :- Should image size be defined in the img tag height/width attributes or in CSS?

edited May 23 '17 at 11:43

Community

1
1

answered May 30 '13 at 07:04

Pranav

8,563
4
26
42

Yes this works, but what I need is the reason for the behavior mentioned in the question. If someone could point why is it correct / wrong will be helpful. – Annapoorni D May 30 '13 at 07:10
I have mentioned a very nice link ... go through the answer ..hope that will help you in understanding the difference. Moreover i will also update some points in my answer. – Pranav May 30 '13 at 07:11
Hi Pranav thank you very much for the resources, it helped me get good understanding. – Annapoorni D May 30 '13 at 08:27

width attribute of td is not overriding css width property

3 Answers3