网页中的table表格不能显示

作者:     信息来源:     发布时间:2024-02-19     点击数:57    

近期在调试网页时发现用百度的Ueditor编辑器在文章中增加一个表格,这个表格在编辑器中可以显示,但是文章一发表,网页中显示不出来,查看网面源代码,发现源代码中是有这个table的标签和内容的,后来搜索了一圈,在stackoverflow找到解决方法了。

在stackoverflow的一个帖子中有这么一段话,The table is invisible until you add styling and data to it.,就是说如果网页中不能显示talbe标签的表格,可能是因为没有给table标签设置样式,或者是表格中没有数据,表格标签中间一定要有数据,哪怕是&nbsp这样的空操作符也可以,但不能什么都没有

比如css代码可以这样写

table {
    border-collapse:collapse;
}

table td {
   border:1px solid #000;
}

也可以直接在html中的table标签中这么写

<table border="1" cellspacing="0">

当然不推荐这么干,最好还是用css样式表来控制。

另外就是设置的table标签样式一定要正确,比如定位之类的属性,一定要写对,我这次就是因为我网页中的css显然设置了table标签的样式,但是样式中属性的值设置的不正确,导致表格显示不出来,把各属性设置成正常值后就可以显示了。

下面就是可以正常显示的css代码

/*表格的样式*/
table{
    position: relative;
    bottom: 10%;
    left: 10%;
    z-index: 3;
    border-collapse:collapse;
}
table td {
   border:1px solid #000;
}