CSSで同じタグに対して異なるスタイルの適用

Question

お世話になっております。

下記のように全体のtableタグにスタイルwidth:1000px;を適用していたのですが、table2のテーブルだけthの幅の合計にするために、class="table2"を設定し、thのwidthをそれぞれ50pxで指定いたしました。

いろいろ調べていたのですがCSSの優先順位は
「idセレクタやclassセレクタなどの具体的・局所的なセレクタは、タイプセレクタや全称セレクタのような全般的なセレクタより優先される」
あったのですが

おそらくclassだけtable2を指定しても特にwidthをtable2には適用したくないためスタイルを指定しておらず、table2のなかのthの幅50pxが適用されておりません。

table2だけをth50pxの合計を適用したいのですが、どなたかアドバイスをいただけませんでしょうか。

<追記>
上記の質問内容ですが、単純化のため、不適切な内容であったため、修正を致しました。

宜しくお願い申しあげます。

HTML
    <table border="1" style="border-collapse:collapse;">
      <thead>
        <tr>
          <th >ABCDEFG</th><th>HIJKLMN</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1000</td><td>2000</td>
        </tr>
      </tbody>
    </table>
<br>
    <table class="table2" border="1" style="border-collapse:collapse;">
      <thead>
        <tr>
          <th style="width:50px;">あいうえお</th><th style="width:50px;">かきくけこ</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1000</td><td>2000</td>
        </tr>
      </tbody>
    </table>

CSS

table{
  width:1000px;
}

.table2{
  //テーブルとしてのwidthが固定したくない
}

Comments

[gin]

上記のコードだけだと適用されていますよ？

[SugiuraY]

ご指摘有難うございます。質問内容が適切ではなかったため、修正を致します。

Answer 1

とりあえず質問のコードでは効くので、よくある原因として.table2の前や中で全角文字を使っている場合が考えられます。
全角のコロンやセミコロン。
特に見落としがちなのが全角スペースです。

単に.table2が他にいてそこでwidth: 1000px;とやっていることもありえますが…
###追記
こちらでいけると思います。

.table2 {
	width: auto;
}

Comments

[SugiuraY]

ご回答有難うございます。
大変申し訳ございません。正確な質問を差し上げるべきでした。皆様のご指摘の方法で確かに提示したコードについては分ける事ができました。
ご説明のために、コードを単純化したのが私のミスでした。

実際には.table2のwidthを変えたいわけではなく、テーブルとしての幅は固定せずに内包される<th>のそれぞれの幅の合計をテーブルの幅にしたいと考えております。
質問内容を修正いたします。

[gin]

質問は正確にお願いしますね…
追記しておきました。

[SugiuraY]

ご回答ありがとうございます！
すみません、そんな単純だったのですね。。失礼致しました。

Answer 2

<!--                 ↓ 「"」抜け        ↓ 「th style=」  ↓ 「"」抜け -->
<th style="width:50px;>あいうえお</th><thstyle="width:50px;>かきくけこ</th>

---

追記：

いまいち質問文が読み解けません。こういうことですか？

.table2 {
    width: auto;
}

Comments

[SugiuraY]

大変失礼致しました、ご指摘の点修正をいたしました。
宜しくお願い申し上げます。

[SugiuraY]

ご回答いただき、まことに有難うございます。
その通りでした。大変失礼致しました。

Answer 3

あまり美しくはないですが、
importantをつけると強制的に使用されます。
ただ、これにも適用される順序があるので注意して下さい。

CSSの優先順位

table{
  width:1000px;
}

.table2{
  width:500px!important;
}

Comments

[SugiuraY]

ご回答有難うございます。
すみません、質問を端的に行うために例を単純化したため、内容を誤ってお伝えしてしまいました。深くお詫び申し上げます。質問内容を修正させて頂きました。
宜しくお願い申し上げます。