html - 両側に 2 ピクセルずつ押しつぶされたテーブル

Question

<table id="first"style="width:310px;border:2px;margin-top:10px;margin-left:auto;margin-right:auto;background:#F7F7F7;">
<tr>
    <td style="height:50px;width:100%;"></td>
</tr>
<tr><td>
    <table style="width:100%;">
    <tr>
    <td id="_1"style="background:#FF70C6;width:151px;height:20px;cursor:pointer;">Low/empty</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    <tr>
    <td id="_2"style="background:#0099FF;width:151px;height:20px;cursor:pointer;">Unclean</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    <tr>
    <td id="_3"style="background:#00D07B;width:151px;height:20px;cursor:pointer;">Damaged</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    <tr>
    <td id="_4"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    <tr>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    <td id="_5"style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Unusable</td>
    </tr>
    </table>
</td></tr>
<tr><td id="ad"style="background:url('R/ad.png');width:100%;height:113px;cursor:pointer;"></td></tr>
<tr><td style="height:20px;width:100%;text-align:right;">text</td></tr>

の中にテーブルがあり<td>ます。親<td>には、子テーブルをわずかに（上、左、右、下）押し込む、ある種のセル間隔/パディング境界線があります。

縦横2pxずつですが、<td>下に子テーブルのセル外壁が面一になっている画像があるので、見ると目玉から(激しく)吐きます。w3scools/css-tricks が非常に役立つとは思わないため (または、Google が検索するのに役立つ一貫したクエリ文字列を適切に形成できない可能性があります)、テーブルの CSS を知っている人はいますか?