一部のcssがスマホのみ適応されない現象の原因と解消方法

前提・実現したいこと

モバイルファーストのサイトを構築中です。
PCでは意図した通りにcssが効くのですが、スマートフォンで表示すると一部のcssのみ適応されません。

構築途中ではスマートフォンでも適応されていたcssなので、セレクタが間違っている等は考えにくく、
原因として思い当たるのは、全く別の箇所のcssをいくつか追加した事なのですが、
PCは変わらずcssが効いている為、なぜスマホだけcssが効かなくなってしまったのかが分かりません。

いくつかスマホのみ効かなくなってしまったcssがありますが、例えばテーブルです。
テーブルはPCスマホ同じcssを適応させたいので共通cssですが、
PCでは罫線が表示されきちんと適応されていますが、スマホだと適応されずreset（同style.css内最上部に記述）のtableが効いてしまっているようです。

デベロッパーツールで確認しても、PCはspecクラスがきちんと表示されますが、スマホにするとspecクラス自体が当たっていない状態になってしまいます。（PCには@media (min-width: 769px)がついて表示されてしまいます・・・）

該当のソースコード

HTML
1<table class="spec">
2  <tr>
3    <th><p>サイズ</p></th>
4    <td><p>サイズ詳細</p></td>
5  </tr>
6  <tr>
7    <th><p>色</p></th>
8    <td><p>色詳細</p></td>
9  </tr>
10  <tr>
11    <th><p>重さ</p></th>
12    <td><p>重さ詳細</p></td>
13  </tr>
14  <tr>
15    <th><p>素材・原材料</p></th>
16    <td><p>素材</p></td>
17  </tr>
18</table>

css
1.spec {border-top: 1px solid #9e9e9f;width: 100%;border-collapse: collapse;font-size:14px;}
2.spec tr {border-bottom: 1px solid #9e9e9f;}
3.spec td {border: none;text-align: left;vertical-align: middle;padding: 16px 6%;}
4.spec th {text-align: center;padding: 16px;width: 22%;font-weight: normal;border-right: 1px solid #9e9e9f;}