css - テーブルでの :before および :after タグの使用

Question

:beforeスタイル設定のために、HTML テーブルで CSSと:afterタグを使用して、ある種の自動ヘッダーとフッターを生成しようとしています。それらは単なる表面的なものですが、これらを一般的なテーブル スタイルの一部として定義できるようにしたいと考えています。

現在、要素の右側と左側に特定の画像を配置しようとして、単純な丸い境界線 (画像を使用) でテストしていますが、この同じ手法を他の多くのスタイルにも使用したいと考えています。

私はこのようなことをしています:

.minTable {
    background-color: #3377AA;
}


.minTable:before {
    background: transparent url("topright.png") scroll no-repeat top right;
    height: 13px;
    display: block;
    border: none;
    content: url("topleft.png");
}

.minTable:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url("bottomleft.png");
  margin: 0 0 -1px 0;
  height: 13px;
  background: transparent url("bottomright.png") scroll no-repeat bottom right ;
  padding: 0;
}

...

<table class="minTable" width="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>Some text</td>
    <td>Some other text</td>
  </tr>
</table>

これは、要素の幅がテーブルの幅ではなく、最初のセル (列) のサイズと一致しているように見えることを除いて、私が望む方法を大まかに表示します。したがって、私の「右側」の画像は、テーブルの最初の列の右側に表示されます。

これは、私がやろうとしていることを達成するための信じられないほど愚かな方法かもしれませんが、なぜ :before と :after がテーブル全体ではなく最初の列だけに並んでいるように見えるのか、私は混乱しています.

:beforeとがここで何をしているのかを理解してくれる人:afterはいますか?