码迷,mamicode.com
首页 > 其他好文 > 详细

表格 及其垂直居中

时间:2018-12-16 11:19:12      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:规则   tle   ups   table   width   --   order   oat   tab   

# 表格
# table的display: table
# table显示规则注意点:当设置的盒子高度大于显示内容需求高度,采用设置高度;反之则由显示内容撑开
# border:设置边框宽度
# cellspacing: 单元格间的间距
# cellpadding: 单元格的内边距==>th,td设置padding
#
# 举例:
# <!DOCTYPE html>
# <html>
# <head>
# <meta charset="UTF-8">
# <title>表格</title>
# <style type="text/css">
# .table1{
# width: 50px;
# height: 50px;
# }
# th,td{
# padding: 20px;
# }
# .table2 td {
# border: 10px solid black;
# }
# </style>
# </head>
# <body>
# < table
#
#
# class ="table1" border="1" cellpandding="10px" cellspacing="0" >
#
# < tr >
# < th > 标题 < / th >
# < th > 标题 < / th >
# < th > 标题 < / th >
# < / tr >
# < tr >
# < td > 单元格 < / td >
# < td > 单元格 < / td >
# < td > 单元格 < / td >
# < / tr >
# < tr >
# < td > 单元格 < / td >
# < td > 单元格 < / td >
# < td > 单元格 < / td >
# < / tr >
#
# < / table >
#
# < !-- 边框的保留格式rules:rows | coll | groups | all -->
# < table
#
#
# class ="table2" border="10" rules="all" >
#
# < thead >
# < th > 标题 < / th >
# < th > 标题 < / th >
# < th > 标题 < / th >
# < / thead >
# < tbody >
# < tfoot >
# < tr >
# < !-- rowspan合并列 -->
# < td
# rowspan = "2"
# colspan = "2" > 单元格 < / td >
# < !-- < td > 单元格 < / td > -->
# < td > 单元格 < / td >
# < / tr >
# < tr >
# < !-- < td > 单元格 < / td > -->
# < !-- < td > 单元格 < / td > -->
# < td > 单元格 < / td >
# < / tr >
# < tr >
# < !-- colspan合并行 -->
# < td
# colspan = "2" > 单元格 < / td >
# < !-- < td > 单元格 < / td > -->
# < td > 单元格 < / td >
# < / tr >
# < / tfoot >
#
# < / tbody >
#
# < / table >

# 实现多行文本垂直居中:

# 举例:
# <style type="text/css">
# .box,.b1 {
# width: 150px;
# height: 150px;
# margin: 10px auto;
#
# text-align: center;
# }
# .b2,.b3 {
# line-height: 150px;
# /*不起作用*/
# /*vertical-align: middle;*/
# }
# .b1 {
# /*float: left;*/
# /*实现多行文本垂直居中*/
# /*针对父级设置,父级中的多个块级文本类子级标签垂直居中*/
# display: table-cell;
# vertical-align: middle;
# }
# </style>
# </head>
# <body>
# <!-- 注: 如果想要调整box位置 可以给box嵌套一个子级b1来进行分标签控制 -->
# <div class="box">
# <div class="b1">
# <p>真的</p>
# <p>好的</p>
# </div>
# </div>
# <div class="box b2">
# <p>真的2</p>
# <p>哈哈哈哈</p>
# </div>
# <div class="box b3">
# <p>你的大锅饭</p>
# <p>吃穷</p>
# </div>

表格 及其垂直居中

标签:规则   tle   ups   table   width   --   order   oat   tab   

原文地址:https://www.cnblogs.com/yanhui1995/p/10125583.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!