[转载]在table上使用::before/::after的问题

在table上使用::before/::after的问题

转载自：

次碳酸钴的技术博客

http://www.web-tinker.com/article/20638.html

　　在table上使用::before和::after之类的为元素会不会不科学呢？像table这样限定了子元素的标签，::before和::after之类的伪元素是怎么处理的？其实也没什么不科学的，因为浏览器设置都支持非table元素使用display设置得和table系列元素一样。
　　浏览器并不在乎你用什么标签，只要display能对上即可，即使全用DIV也可以实现表格运行<style>
.table {display:table;border:1px solid red;border-spacing:2px;}
.tr {display:table-row;}
.td {display:table-cell;border:1px solid red;padding:1px;}
</style>
<div class="table">
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
  </div>
  <div class="tr">
    <div class="td">3</div>
    <div class="td">4</div>
  </div>
</div>
　　所以，伪元素只要有正确的display，在表格中使用是完全没问题的。如果display不正确，普通的元素就会被提取到表格外。运行<style>
table {border:1px solid red;border-spacing:2px;}
td {border:1px solid red;padding:1px;}
span {border:1px solid red;display:inline-block;}
</style>
<table>
  <span>div</span>
  <tr><td>
    td
  </td></tr>
</table>
　　但如果使用::before和::after，即使没有正确的display也会被包含到table中运行<style>
table {border:1px solid red;border-spacing:2px;}
td {border:1px solid red;padding:1px;}
table:before {
  content:'before';
  border:1px solid red;
  display:inline-block;
}
</style>
<table id="table">
  <tr><td>td</td></tr>
</table>
<script>
document.write(getComputedStyle(table,"::before").display);
</script>
　　IE8不支持getComputedStyle，所以没显示其display的值，但效果是相同的。虽然这个伪元素看似是TD的样子，但其实不是，它不会自动计算宽度。只有display:table-cell的元素才会在表格内被自动计算宽度。
运行<style>
table {border:1px solid red;border-spacing:2px;}
td {border:1px solid red;padding:1px;}
table:before {content:'x';border:1px solid red;display:inline-block;}
table:after {content:'x';border:1px solid red;display:table-cell;}
</style>
<table id="table">
  <tr><td>td</td></tr>
</table> 　

　也许有人会觉得，没有TR只有用TD是不对的，其实这并没什么问题，如果没有TR直接遇到TD，引擎会为其建立一个TR。就像我们通常都不写TBODY一样，这也是自动建立的。
　　根据以上这些逻辑，::before和::after是可以在表格中使用的，而且如果不需要自动计算宽度（比如用于绝对定位）甚至不需要设置正确的display。