在table上使用::before/::after的问题
2015-03-24 16:30
134 查看
在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。
相关文章推荐
- 如何解决CSS3使用:after和:before阴影,由z-index引起的问题
- HTML中div标签与table标签组合使用问题
- 使用TableDiff实用工具解决事务复制中的问题
- 使用内存表table()和connect by level 处理 一行多条数据显示问题
- Hibernate下搭建JUNIT的测试环境,使用beforeclass和afterclass实现sessionFactory建立一次
- 如何使用:before和:after伪元素?
- 使用TableDiff实用工具解决事务复制中的问题
- 图片延迟加载中使用table的兼容问题修改
- DOM insertBefore 使用遇到的问题,记录下
- Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题
- 使用TableDiff实用工具解决事务复制中的问题
- 转:邹建--使用TableDiff实用工具解决事务复制中的问题
- 使用TableDiff实用工具解决事务复制中的问题
- 使用TableDiff实用工具解决事务复制中的问题
- SQL SERVER 2005:在After Insert触发器中使用INSERT后,影响SCOPE_IDENTITY 问题
- ORACLE新增主键问题【CREATE PRIMARY KEY AFTER CREATED A TABLE】
- [转贴]使用TableDiff实用工具解决事务复制中的问题
- 使用TableDiff实用工具解决事务复制中的问题
- QT DLL的使用问题---QWidget: Must construct a QApplication before a QPaintDevice
- 使用Junit4进行单元测试没法实现@BeforeClass注解及出现application.xml没法加载问题