在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。