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