表格 及其垂直居中
阿新 • • 發佈：2018-12-16
# 表格
# 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>