CODEWITHSUNDEEP
htmlcsshtml-table
Vinzcent
Vinzcent

Reputation: 1448

Overwrite HTML width property with CSS

Is it possible to overwrite the HTML property width of a table without using CSS classes in CSS?

I tried something like this without any luck:

<table cellpadding="0" cellspacing="0" width="180">
    <tbody>
        <tr>
            <td bgcolor="#f0f0f0">
                <img style="display:block;" border="0" src="menu_up.jpg" alt=" " width="20" height="64">
            </td>
         </tr>
    </tbody>
</table>

CSS:

@media only screen and (max-device-width: 480px) {

    td[width=180] {
        width: 100px !important;
    }

}

Any ideas?

Help much appreciated.

Upvotes: 1

Views: 2942

Answers (3)

noob
noob

Reputation: 9212

Yes, this is possible. You just need to select the table and not the td and you should put the value of the width attribute in quotes (just tried it out).

table[width="180"] {
    width: 100px !important;
}

Upvotes: 2

Rob W
Rob W

Reputation: 349262

  1. The value in a CSS attribute selector has to be quoted.
  2. Use table instead of td.

The following worked as intended in Firefox 9.0.1 (http://jsfiddle.net/WsbP6/).

table[width="180"] {
    width: 1000px;
}

Without quotes, the following error appears in my console:

Expected identifier or string for value in attribute selector but found '180'.
Ruleset ignored due to bad selector.

Upvotes: 3

Adaz
Adaz

Reputation: 1665

I think you can, you just target the wrong thing, instead of td {}, try table {}:

http://jsfiddle.net/adaz/msgtG/

Upvotes: 0

Related Questions