1.新建一個(gè)html文件,命名為test.html,用于講解css表格的邊框線怎么設(shè)置。
2.在test.html文件內(nèi),使用table標(biāo)簽創(chuàng)建一個(gè)表格,用于測(cè)試。
3.在test.html文件內(nèi),設(shè)置table標(biāo)簽的class屬性為iione。
對(duì)table設(shè)置css樣式邊框,分為幾種情況:
1、只對(duì)table設(shè)置邊框
2、對(duì)td設(shè)置邊框
3、對(duì)table和td技巧性設(shè)置表格邊框
4、對(duì)table和td設(shè)置背景,實(shí)現(xiàn)完美表格邊框
以下DIVCSS5對(duì)以上幾種實(shí)現(xiàn)html 表格邊框樣式進(jìn)行講解與案例演示。為了便于觀察,divcss5均設(shè)置所有案例表格為1px實(shí)線紅色邊框?yàn)槔?;table寬度為400px;表格為三列三行,對(duì)以上四種情況表格外層加個(gè)div盒子,分別CSS命名為“.table-a”、“.table-b”、“.table-c”、“.table-d”。
1.使用margin屬性,給盒子元素添加“margin: 0 auto;”樣式即可水平居中;
2.利用flex彈性布局來(lái)實(shí)現(xiàn)水平居中;
3.利用position和transform屬性實(shí)現(xiàn)水平居中。
第一種:子元素使用margin屬性
第二種【最常用】:定位
第三種;flex-box 彈性盒子,只需要作用在父級(jí)元素即可