css布局:table,table-cell

html-css017

css布局:table,table-cell,第1张

table: 会作为块级表格来显示(类似 <table>)

table-row: 浏览器会默认创建一个表格行(类似<tr>)

table-cell: 作为一个表格单元格显示(类似 <td>和 <th>)

具体实现

结果:

左边宽度固定,右边自适应

结果:

结果:

结果:

我们要 <div class="box">B</div>" 整个可以使用 text-align: right 属性,也就是整个B框要在红色背景的右边,需要先将他们设置 inline-block 属性

结果:

内嵌标签: 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

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>table</title>

<style>

table td{ width:100px height:30px line-height:30px border:1px solid #063 text-align:left}

</style>

 <!--直接设置td text-align:left就可以了,默认情况下text-align:left,如果其它没有设置可以不用设置这个属性(深圳网站建设:www.sz886.com)-->

</head>

 

<body>

<table>

   <tr>

      <td align="center">1</td>

      <td>2</td>

   </tr>

</table>

</body>

</html>