A simple form can sometimes feel monotonous, so how do you add a style to a CSS table? This article will introduce you to the CSS table style setting method.
1. A simple form
Table.html
<!doctype html>table,td,th{ border:1px solid #aaa; font-size:23px; }
2. Frame Merge: Boder-collapse
Property value:
separate; (separate, default)
Collapse; (consolidated)
Table.css
table,td,th{ border:1px solid #aaa; font-size:23px; Border-collapse:collapse; }3, the Border spacing border-spacing (if: border-collapse:separate;)
Table.css
table,td,th{ border:1px solid #aaa; font-size:23px; Border-collapse:separate; border-spacing:45px; }4, set the position of the table title Caption-side
Property value:
top;//Default
Bottom
Left
Right
Table.css
table,td,th{ border:1px solid #aaa; font-size:23px; Border-collapse:separate; border-spacing:45px; Caption-side:bottom; }5. When the width of the cell object exceeds the width defined by the cell, the width of the table can be table-layout:fixed unchanged
Property value: Auto (default)
Fixed (width fixing)
Table.css
table,td,th{ border:1px solid #aaa; font-size:23px; Border-collapse:separate; border-spacing:5px; table-layout:fixed; Caption-side:top; }Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
