css Vererbung unterbinden

[Linuchs]

Moin,

ich habe Formulare in Form von <table>, für die ich die Spalten per CSS einrichte.

Innerhalb des Formulars gibt es Felder, die sich während des Tippens Vorschläge per Ajax holen.

Nun blende ich die Vorschläge als <table class="t_ajax"> ein und möchte die Spalten unabhängig von der übergeordneten Tabelle definieren.

Die übergeordnete Tabelle hat z.B. tr>td:nth-of-type(2){text-align:center} und die t_ajax-Tabelle ausdrücklich tr>td:nth-of-type(2){text-align:left!important}, das wird aber ignoriert und vom FF-Inspektor nichtmal angezeigt.

Die übergeordnete Tabelle ist im HTML-Dokument definiert, die t_ajax in der anschließend geladenen basis.css - von daher müssten doch die später definierten Werte auch ohne !important Vorrang haben?

<style>
    table.tp502 tr>td:nth-of-type(2) {  /* Pflichtfeld */
      width: 0.5em;
      text-align: center;
      color: #f00;
      font-size: 120%;
      font-weight: bold;
    }
... 
</style>
<link rel=stylesheet      href="css/basis.css">

Datei basis.css:

/* Tabelle in p502, p504 mit Vorschlagswerten aus ajax_getTreffpunkte.js 2019-03-18 */
table.t_ajax {
  all: initial;
}
table.t_ajax tr>td:nth-of-type(1) {
  text-align: right!important;
}
table.t_ajax tr>td:nth-of-type(3) {
  text-align: left!important;
  color: inherit!important;
}

auch initial setzt die Werte nicht zurück.

Wie kann ich die untergeordnete Tabelle von Vererbung befreien?

Gruß, Linuchs

Edit: Sehe gerade, dass ich type(2) gar nicht überschrieben habe. Aber es kann doch nicht richtig sein, jede vererbte CSS-Angabe einzeln zu überschreiben. Da muss man nur dem parent nachträglich etwas hinzufügen und schon schlägt es durch?