?
Solved

override table width

Posted on 2006-10-31
11
Medium Priority
?
348 Views
Last Modified: 2012-06-21
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.

0
Comment
Question by:asphead
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17841070
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
 
LVL 7

Expert Comment

by:Animasu
ID: 17841091
you can allways do this

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

- Animasu
0
 
LVL 7

Expert Comment

by:Animasu
ID: 17841101
VoteyDisciple Beet me to it :P i'de use his/hers!

- Animasu
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:asphead
ID: 17841226
i've tried putting in this:

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

but it doesn't work. is my syntax correct?
0
 

Author Comment

by:asphead
ID: 17841244
also, it seems that the !important rule is ignored by IE !!!
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17841525
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
 

Author Comment

by:asphead
ID: 17841761
if it won't work in IE then I will need to find another workaround as it needs to work in all browsers
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17842263
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
 

Author Comment

by:asphead
ID: 17842903
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
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 600 total points
ID: 17842931
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
 

Author Comment

by:asphead
ID: 17843357
thanks VoteyDisciple - that worked for me
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question