Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

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

  在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。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^