• HTML表格中各元素标签的位置对style属性有效性的影响


    开发了一个动态表格制作程序,用的是谷歌浏览器。发现几个现象,记录如下:

    1、按照技术文档的说法,正规的表格样式如下:

    <table>

    <caption>标题</caption>

    <colgroup>

    <col>  //我在这里设置了各列的背景色彩、列宽

    ......

    <col>

    </colgroup>

    <tfoot>。。。。。。</tfoot>  //技术文档说,要放在这里。

    <thead>

    <tr>   //设置表头

    <th>表头1</th>

    ......

    <th>表头n</th>

    </tr>

    </thead>

    <tbody>

    <tr> 

    <td>表格1</td>

    .......

    <td>表格n</td>

    </tr>

    ......

    </tbody>

    </table> 

    2、设计中发现,具备上述完整格式标签的结构,会出现有的属性失效。

    (1)如果有<tbody></tbody>则里面的背景色、宽度均无效。但<thead></thead>里面的表头宽度不受影响。

    (2)如果删除<tbody>和</tbody>,同时删除<thead>和</thead>,则<col>标签设置的背景色和宽度均有效,查看开发者工具,发现谷歌浏览器已经自动添加了<tbody></tbody>。

    (3) 如果删除<colgroup></colgroup>则浏览器会自动添加。同时<col>标签设置的属性有效。

    (4)谷歌浏览器不自动添加<thead></thead>标签。

    (5)谷歌浏览器自动将<tfoot></tfoot>移动到最后。

    3、上述现象没有在其他浏览器上观察过,发现同类问题的朋友可以在下面留言交流。

  • 相关阅读:
    C++ Primer学习笔记(三) C++中函数是一种类型!!!
    C++类的成员函数的形参列表后面的const
    C++ const总结
    简单的使用Gson (序列化 和 反序化)
    HTML 获取class里的多个值 和 dataset的使用
    SiteMesh的简单使用
    IDEA 使用LiveEdit插件
    Java 转发和重定向的区别
    Web.xml 定制URL
    java 枚举类(简单使用)
  • 原文地址:https://www.cnblogs.com/nxmxl/p/11996854.html
Copyright © 2020-2023  润新知