CSS —表格基本知识

  • table的基本格式
    这篇里面,写了表格基本用到的标签。但是出于兼容性,不考虑thead tbody tfoot
    《CSS —表格基本知识》 未修饰的效果
  • 依据属性设置表格
  • border
    • **border-spacing **

      《CSS —表格基本知识》 效果

      border-spacing设置边框之间的距离,一个值代表水平边框之间的距离,两个值分别代表水平与垂直之间的距离。

    • border-collapse
      《CSS —表格基本知识》 效果
      border-collapse代表设置是否把表格边框合并为单一的边框。他有两个值,collapse代表边框合并为单一的边框。separate默认值,边框会被分开。
      当设置成border-collapse:collapse时,border-spacing会不起作用。
  • padding
    《CSS —表格基本知识》 效果
    关于padding的设置同盒子模型。
  • 利用之前学的进行修饰
    《CSS —表格基本知识》 效果
  • 文本内容
    《CSS —表格基本知识》 效果
    文本水平对齐:text-align:center、left、right
    文本垂直对齐:vertical-align:bottom、middle、top
  • 标题的位置
    caption{caption-side: bottom;}//IE7以前及IE7不支持
    标题对齐方式:caption-side: bottom、top(默认)
  • 空单元格
    table,tr,th,td{
    border: 2px solid #FFAFA0;
    border-collapse: separate;//隐藏空单元格的前提
    empty-cells: hide; }
    空单元格的显示与否:empty-cells:hide、show(默认)
    《CSS —表格基本知识》 效果
    原文作者:Miss____Du
    原文地址: https://www.jianshu.com/p/1a4413a45f09
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞