【css】table-border样式小结

html-css06

【css】table-border样式小结,第1张

内嵌标签: thead (可选)、 tbody (可选)、td、tr、colgroup 、 caption (可选)

属性:align ,bgcolor ,bordercolor,border ,cellpadding ,cellspacing ,frame ,width ,summary ,rules 。

现在的table的属性基本已经过时,都使用css进行设置table样式。

1.border-collapsecollapse | separate

collapse : border线合并

separate: border线分隔,默认属性

ps: 使用collapse 此属性时, border-spacing 、empty-cells和 border-radius 失效 ,无任何效果。

2.border-spacinghorizontal <length >| vertical <length >

3.vertical-align 设置内容与图片位置

4.table-layout auto | fixed

ps: auto 表格布局自适应宽度

fixed 表格布局固定宽度,文字内容等可能会溢出

5.caption-side 针对于caption标签的css样式设置

6.empty-cells 但单元格内无内容时候,可设置隐藏

参考:

https://www.sitepoint.com/community/t/table-format-using-css-border-issue/36882/3

https://css-tricks.com/almanac/properties/b/border-collapse/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table

一行文字垂直居中:利用line-height来设置

多行文字垂直居中:利用display:table-cell来设置。

代码以及效果:

图片垂直居中:使用绝对定位和transform

代码以及效果:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

#box {

width: 300px

height: 300px

background: #ddd

position: relative

}

#child {

background: #93BC49

position: absolute

top: 50%

transform: translate(0, -50%)

}

</style>

</head>

<body>

<div id="child">

<img alt="" src="img/u=2639088341,2223755776&fm=27&gp=0.jpg" style="display: inline-blockvertical-align: middle" />

</div>

</body>

</html>

<div></div>垂直居中:

代码与效果:

<head>

<meta charset="utf-8" />

<title></title>

<style>

.zz {

position: absolute

top: 50%

width: 200px

height: 100px

margin-top: -50px

}

</style>

</head>

<body>

<div class="zz">

<span>测试垂直居中</span>

</div>

</body>

<div><div></div></div>里的div垂直居中:

代码与效果:

<head>

<meta charset="utf-8" />

<title></title>

<style>

.root-div{

/*注意,外容器需要指定一个height:*/

height: 700px

}

.children-div{

position: relative

top: 50%

-webkit-transform: translateY(-50%)

-webkit-transform: translateY(-50%)

transform: translateY(-50%)

}

</style>

</head>

<body>

<div class="root-div">

<div class="children-div">Hello</div>

</div>

</body>