レスポンシブ時、表の列幅を固定したい

実現したいこと

スマホなど画面サイズが変わったとき、表すべての列幅が同じ幅になるようにしたいです。
下記画像はpcの画面サイズときの状態です。この状態を画面サイズが変わっても、pcと同じように等しい列幅にしたいです。

前提

現在シリウスというシステムを使ってサイトを作成しております。まだ未完成のため、サーバーにアップしておりませんが、
サーバサイドで特別に処理を行わずに済む機能を活用しております。

ほぼプログラミングは未経験で、コードも引用してる部分が多いので、
ご不明な点等ございましたら、遠慮なく言っていただけると幸いです。

発生している問題・エラーメッセージ

下記画像のようにスマホサイズ（横幅375px）で表示したときに他の列に割り込む幅になってしまいます。

該当のソースコード

html

1<table>2<tbody>3<tr>4<td class="sample10">5<p><a href="./year_anime_charecter/vaioret_evagarden/junbi.html" class="AAA"><img src="./img/準備中.jpg"></a></p><div class="mask"><a href="./year_anime_charecter/vaioret_evagarden/junbi.html" class="AAA"><br><div class="caption">サンプル<br><p></p>6<p style="text-align:center;">サンプル(マスク表示)</p><br></div></a>7</div>8</td>9<td class="sample10">10<p><a href="./year_anime_charecter/vaioret_evagarden/junbi.html" class="AAA"><img src="./img/準備中.jpg"></a></p><div class="mask"><a href="./year_anime_charecter/vaioret_evagarden/junbi.html" class="AAA"><br><div class="caption">サンプル<br><p></p>11<p style="text-align:center;">サンプル(マスク表示)</p><br></div></a>12</div>13</td>14<td class="sample10">15<p><a href="./year_anime_charecter/vaioret_evagarden/junbi.html" class="AAA"><img src="./img/準備中.jpg"></a></p><div class="mask"><a href="./year_anime_charecter/vaioret_evagarden/junbi.html" class="AAA"><br><div class="caption">サンプル(マスク表示)<br><p></p>16<p style="text-align:center;">サンプル(マスク表示)</p><br></div></a>17</div>18</td>19</tr>20<tr>21<th class="AAA"><a href="./year_anime_charecter/vaioret_evagardenjunbi.html" class="AAA">サンプル</a></th>22<th class="AAA"><a href="./year_anime_charecter/vaioret_evagarden/junbi.html" class="AAA">サンプル</a></th>23<th class="AAA"><a href="./year_anime_charecter/vaioret_evagarden/junbi.html" class="AAA">サンプル</a></th>24</tr>25<tr>26</tr></tbody>27</table>

css

1td.sample10 {2 width: auto;3 height: auto;4 overflow: hidden;5 margin: 10px 0;6 position: relative; /* 相対位置指定 */7 padding: 0px8}9.sample10 .caption {10 font-size: 100%;11 text-align: center;12 padding-top: 20px;13 color: #fff;14 15 16}17.sample10 .mask {18 width: 100%;19 height: 100%;20 position: absolute; /* 絶対位置指定 */21 top: 0;22 left: 0;23 opacity: 0; /* マスクを表示しない */24 background-color: rgba(0,0,0,0.4); /* マスクは半透明 */25 -webkit-transition: all 0.2s ease;26 transition: all 0.2s ease;27}28td.sample10:hover .mask {29 opacity: 1; /* マスクを表示する */30}31 32.AAA:visited{33 color:purple;34}35 36.AAA:link{37 color:blue;38}39 40.AAA:active{41 color: red;42}43 44.AAA:hover{45 background: #eee;46}47 48.AAA {49 50 font-size: 1.32rem;51 padding: 0px;52 width: 240px;53}54 55/*スマホペディング変更*/56@media screen and (max-width: 400px) {57.sample10 .caption { 58 position: relative;59 bottom: 10px;60 padding-top: 0px;61 }62}