Question

When you stretch your table in tinymce you get this

<table class="opbouw" style="width: 725px; height: 170px;" border="0" cellpadding="0" cellspacing="0">

However, I want it to be overridden because all tables must be 100% width for printing, else its looks crappy.

Can anyone tell me how to override it so the table is 100% when printing?

Answer 1

Since your width is set inline with the style attribute you won’t be able to override it. Sometimes not even !Important will override it. If you can move the sizing information to a class, then you can reset the width to 100% in your print styles sheet.

If you do not want to add the size info to the class opbouw, then you can create a second class, for example, narrowTable and apply both to the table like this:

<table class="opbouw narrowTable" ...>

In your print stylesheet you can reset the size properties:

<style type="text/css">
 @media print
 {
     TABLE, .narrowTable
     {
         width: 100%;
         margin: 0;
         padding: 0;
     }
  }

  @media screen
  {

     .opbouw
     {
     }

     .narrowTable
     {
         width: 725px;
         height: 150px;
         border: none;
     }

     /* all your normal screen styles */
  }
</style>

For more on CSS Selector Specificty (who wins when multiple styles are pointed at the same element), see this here, my most favorite CSS article on the web.