zoukankan      html  css  js  c++  java
  • table常用功能总结

    1,设置表格边框为单线框

    table, th, td
    {
    border: 1px solid blue;
    }
    加上:
    table
    {
    border-collapse:collapse;
    }

    由于 table、th 以及 td 元素都有独立的边框,设置border会使表格具有双线条边框,
    如果需要把表格显示为单线条边框,请使用 border-collapse 属性。
    border-collapse:collapse; 说的是 边框折叠情况:折叠。


    2,设置单元格td的宽度不起作用
    加上:
    table
    {
    table-layout:fixed;
    }
    (1)
    table-layout:fixed 固定表格布局
    水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
    (2)
    table-layout:automatic 自动表格布局
    默认。列宽度由单元格内容设定。这就是导致设置td宽度不起作用的原因。

    3,
    table设置标题位置在表格下面。
    <table border="1">
    <caption>This is a caption</caption>
    <tr>
    <td>Adams</td>
    <td>John</td>
    </tr>
    </table>

    caption
    {
    caption-side:bottom
    }

    4,隐藏表格中空单元格上的边框和背景
    table
    {
    border-collapse:separate;
    empty-cells:hide;
    }
    empty-cells 属性设置是否显示表格中的空单元格(仅用于“分离边框”模式)。

    5,设置table偶数行样式
    #customers tr.alt td
    {
    color:#000000;
    background-color:#EAF2D3;
    }

  • 相关阅读:
    函数细节
    ElementUI的Table组件自定义合计行内容
    好看的字体收藏
    MD5加密生成与SHA526加密生成
    XML和Map之间互相转换
    银联支付
    微信支付开发
    MySql创建索引,添加索引
    jqgrid分级表格合并
    关于C# XmlDocument方法Load加载流后自动释放流的解决方法
  • 原文地址:https://www.cnblogs.com/wang7/p/3771103.html
Copyright © 2011-2022 走看看