Question

I am supporting a legacy application.

In the CSS there is the following rule:

.dashboard-panel table {
    width: 100%;
}

So basically there are many panels, and for all tables in them the width is set to 100%.

Now the problem: in a dashboard panel I have put a calendar control from an external library (richfaces). This calendar control is using a table for displaying the days. And this width:100% is affecting the calendar table.

Example:

<div class="dashboard-panel">
    <div id="content">
       <table id="table1"> //this is ok
            <tr>
               <td>
                  <table id="richfacesCalendarTable"> //this not ok
                  </table>
               </td>  
            </tr> 
       </table>        
    </div>
</div>

What is the proper solution here?

I don’t want to go through every panel in this application and put a separate style there.

Answer 1

Mabye if you add something like that into end of your css:

.dashboard-panel table#richfacesCalendarTable {
    width: your_desired_width_px !important;
}

or

.dashboard-panel table#richfacesCalendarTable {
    width: auto !important;
    display: table !important;
}

Hard to say for sure as this is only a small portion of HTML and CSS code you provided. There can be other elements that affects your result.