Table邊框(borders)
- e.g.
table, th, td {
border: 1px solid black;
}
- 上面的邊框看起來是二條邊框，因為table, th, td 有各自的邊框
border-collapse
- 可以合併邊框，解決border二條邊框的問題
- 預設: separate(分開)
- 可選: collapse(合併)
寬(width) 和 高(height)
- width: 100%;
- height: 50px;
水平對齊
- text-align
- 預設: left
垂直對齊
- vertical-align
- 預設: middle
水平分割樣式
- 設定下方邊框即可
th, td {
border-bottom: 1px solid #ddd;
}
滑鼠移過的效果
tr:hover{
background-color: pink;
}
條紋樣式表格
tr:nth-child(even) {
background-color: pink;
}
響應式表格
- 在外層加上 div 並設定 overflow-x: auto
沒有留言:
張貼留言