override table width

I have a div tag which surrounds 3rd party content. It looks like so:

<div id="mainpage">

<table width="755">
<tr>
<td>TEXT</td>
</tr>
</table>

</div>

The problem i am having is that the table is too big. If possible i would like to set a width in the div tag that would override the table width.

Is this possible?

i have already added a style="width:455" to the div tag, but this failed to work.

aspheadAsked:
Who is Participating?
 
VoteyDiscipleConnect With a Mentor Commented:
What I tried was:

<head>
<style type="text/css">
div#main table {
    width: 200px;
}
</style>
</head>

<body>

<div id="main">
<table width="500">
<tr><td>A</td><td>B</td></tr>
</table>

</div>

</body>



Is it possible the nature of the table's contents are such that it has to expand the table wider than the width you're giving to fit?  Like, one really long word, for example?  That can be overcome too, if that's the case.
0
 
VoteyDiscipleCommented:
You might try something like:

div#mainpage table {
    width: 900px;
}


If that doesn't work you could try it with !important too.

I can't remember offhand where HTML attributes fit in the cascade, but I think they count the same as if the table had style="width: 755px;" as an attribute of the tag.  In that case the !important will definitely be necessary, but will also correctly override the width given in the HTML.
0
 
AnimasuCommented:
you can allways do this

<style>
table{width:500px;}
</style>

- Animasu
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
AnimasuCommented:
VoteyDisciple Beet me to it :P i'de use his/hers!

- Animasu
0
 
aspheadAuthor Commented:
i've tried putting in this:

<div id="mainpage" style="width: 455px !important;">

but it doesn't work. is my syntax correct?
0
 
aspheadAuthor Commented:
also, it seems that the !important rule is ignored by IE !!!
0
 
VirusMinusCommented:
what you're doing is still only applying css to the div, not to the table.

you need to put up in between your head tags the css to affect the table inside the div like the other experts have said. Or you could put it in a stylesheet that is being used on your page.

div#mainpage table {
    width: 500px;
    width: 500px !important
}

and yes IE will ignore the !important
0
 
aspheadAuthor Commented:
if it won't work in IE then I will need to find another workaround as it needs to work in all browsers
0
 
VoteyDiscipleCommented:
I double checked how specificity is calculated for style attributes ( http://www.w3.org/TR/REC-CSS2/cascade.html ) and I was correct; it counts the same as if the table were styled with an ID.

Thus, the selector "div#mainpage table" is more specific, and will take precedence without the !important.  To be sure, I tested it just now and it works just as expected.  

As VirusMinus pointed out, though, your rule is still applying style to the DIV, not the table.  You have to use the selector I gave (or what VirusMinus wrote).   Incidentally, what Animasu suggested will not work; your selector has to have an ID in it.
0
 
aspheadAuthor Commented:
hi VirusMinus ,

could you post the example you created that shows it working?

i haven't had any luck with it so far...

thanks!
0
 
aspheadAuthor Commented:
thanks VoteyDisciple - that worked for me
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.