Greetings! I am currently utilizing JQuery fullCalendar within AngularJS and find myself in need of assistance regarding table styling. The fullcalendar has its own CSS file from the plugin, which can be viewed here.
The issue arises due to the presence of other stylesheets in the project/website, including one designed specifically for responsive tables. Unfortunately, I have no control over which stylesheets are accessible within the HTML. This results in the calendar's styling becoming illogical when viewed on a smaller window.
Is there a way to command the controller to disregard certain stylesheets or manipulate the calendar's stylesheet to take precedence instead?
Edit: I should mention that the mentioned stylesheet stylizes tables universally without any specific class names. Given its widespread use throughout the website, altering it with classes is not a practical option at this time.
I have pinpointed the problematic CSS code responsible for altering the calendar's appearance on smaller screens. If I remove this section, the calendar becomes responsive and functions perfectly. However, doing so affects the rest of the website negatively. Yet, in my perspective, shouldn't the CSS within the full calendar stylesheet carry more weight?
/* Ensuring responsiveness for other tables */
table:not([name='start_time']), thead, tbody, th, td, tr {
display: block;
}
/* Ensuring responsiveness for other tables */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
td {
position: relative;
padding-top: 15px;
padding-left: 50%!important;
border: transparent!important;
}