I am using AjaxControlToolkit and the main-page CSS is also affecting the inner "calendar" popup.
I've reduced everything to a simple 1-page example showing what I want, what I've tried, and the "ugly workaround". I'm looking for a proper CSS solution.
All information is in the example below:
table.my_table_padding {border-collapse: collapse;}
/* starting point (looks a mess) */
/* table.my_table_padding tr td {padding: 20px;background-color: greenyellow;} */
/* My attempts (neither worked) */
/* :not(.ajax_calendar) table.my_table_padding tr td {padding: 20px;background-color: orange;} */
/* :not(div.ajax_calendar) table.my_table_padding tr td {padding: 20px;background-color: orange;} */
/* The workaround that is a mess and a horrid bodge - is there a better way in a single class, using a :not() ? */
table.my_table_padding tr td {padding: 20px;background-color: greenyellow;}
div.ajax__calendar table.my_table_padding tr td {padding: 0;background-color: white;}
<table border="1" class="my_table_padding">
<tr>
<td>Header-text</td>
<td>Sample Text... Sample Text...<br />Text is here</td>
</tr>
<tr>
<td>Header-text</td>
<td>
<div class="ajax__calendar">
<!-- Actually using a popup nuget:AjaxControlToolkit, this is an example -->
See: <a href="https://ajaxcontroltoolkit.devexpress.com/Calendar/Calendar.aspx">AjaxControlToolkit Sample Page</a>
<table border="1" class="my_table_padding">
<tr><td colspan="7">Popup calendar-control</td></tr>
<tr><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
</table>
</div>
</td>
</tr>
</table>
EDIT 1 (to clarify what I'm after)
Basically, I've found one ugly way to achieve the desired display results 1 - adding the original CSS-rule [table.my_table_padding tr td] 2 - Adding another CSS-rule underneath it [div.ajax__calendar table.my_table_padding tr td] that has the reverse-effect of all the changes in the first rule
but, this approach seems messy. I was wondering if there was a better way of phrasing the original (CSS rule 1), in such a way that it picked all tables other than children of the "div class=ajax__calendar" element.
EDIT 2 - The original ASP.NET Webforms code
<asp:DetailsView runat="server" ID="detv_Main" CssClass="my_table_padding detv_example">
<Fields>
<asp:TemplateField HeaderText="Start Date" SortExpression="EventStartDate">
<EditItemTemplate>
<asp:TextBox ID="txt_EventStartDate" runat="server" Text='<%# Bind(example) %>' CssClass="edit_background"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="calext_EventStartDate" TargetControlID="txt_EventStartDate" runat="server" Format="d MMM yyyy" />
</EditItemTemplate>
<ItemTemplate>Example date</ItemTemplate>
</asp:TemplateField>