Я пытаюсь использовать CSS:before а также:after теги с таблицами HTML для генерации сортировки автоматических верхних и нижних колонтитулов для стилизации. Они просто косметические, но я бы хотел определить эти вещи как часть общего стиля таблицы.

Прямо сейчас я тестирую с простыми закругленными границами (используя изображения), пытаясь разместить определенные изображения справа и слева от элемента, но я хотел бы использовать эту же технику для ряда других стилей.

Я делаю что-то вроде этого:

.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 здесь делаешь?