css - Using :before and :after tags with tables -

so i'm trying use css :before , :after tags html tables generate sort of automatic headers , footers, styling. they're cosmetic, i'd able define these things part of, well, general table style.

right i'm testing simple rounded borders (using images) trying place particular images @ right , left side of element, i'd use same technique number of other styles.

i'm doing this:

.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> 

this displays how want, except width of element seems match size of first cell (column), not width of table. "right-side" image displays @ right-side of first table column.

this may incredibly stupid way accomplish i'm trying do, i'm confused why :before , :after seem line first column, not entire table.

can me understand :before , :after doing here?

this occurs because table cannot semantically contain block-level element inside it. using :before , :after pseudo-elements adds content before , after content inside parent.to put more easy-to-understand aspect, here's final result technically in end:

<table class="mintable" width="800" border="0" cellpadding="0" cellspacing="0">   <div class="before">     <img src="topleft.png" />   </div>   <tr>     <td>some text</td>     <td>some other text</td>   </tr>   <div class="after">     <img src="topleft.png" />   </div> </table> 

of course, .before , .after inherit respect pseudo-element-related styles too. however, can imagine block-level element inside of table not act because block-level elements don't belong inside table.

generally, i'd avoid trying use :before , :after tables - that's asking mess.

---

if you're trying add corners, use css select each corner cell. these:

.mintable > :first-child > tr:first-child > td:first-child /* top-left corner */ .mintable > :first-child > tr:first-child > td:last-child /* top-right corner */ .mintable > :last-child > tr:last-child > td:first-child /* bottom-left corner */ .mintable > :last-child > tr:last-child > td:last-child /* bottom-right corner */ 

these selectors not work if: a) have table body elements out of order (such thead, tfoot, tbody - select elements in tbody corners though tfoot appear below); b) have colgroup element @ beginning of table; or c) use rowspans cause bottom cells part of cells in row above.