css-7.表格

来源：互联网发布：万方数据库账号编辑：程序博客网时间：2024/05/16 15:10

-通用样式:width,height,border,background
-文本格式化 vertical-align ，text-align
-表格样式：border-collapse：collapse、separate
border-spacing：value
必须建立border-collapse为separate的提前下
caption-side：定义表格标题的位置
table-layout：表格布局固定或不固定

不固定：默认，较为灵活

eg:

<html><head><meta charset="UTF-8"><title></title><style>table {width: 500px;height: 400px;border: 1px solid black;font-size: 16px;font-family: "微软雅黑";border-collapse: collapse;/* border-collapse:让table的双线边框合并成单线 collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 * */border-collapse: separate;border-spacing: 10px 10px;/* 设置相邻单元格边框间的距离 仅限于分隔单元格边框，即border-collapse属性为separate值的情况下，也称为边框分离模式 取值长度值，可以一个值也可以是两个值，连个值：第一个是水平间距，第二个是垂直距离 * */caption-side: bottom;/*设置caption 标题的位置*/table-layout: fixed;/* table-layout 使用时需要定单元格的宽width：33%，fixed单元格固定，不会自适应被撑开，效率比较高，但要对 溢出做处理  ，可以用overflow: hidden;   text-overflow: ellipsis; * */ }td {border: 1px solid black;text-align: center;width: 33%;overflow: hidden;text-overflow: ellipsis;}</style></head><body><table ><caption> 表格标题</caption><tr ><td title="1111111111111111111111111111111111111"> 1111111111111111111111111111111111111111111111111111111111</td><td>第一行</td></tr><tr><td>第二行</td><td>第二行</td></tr><tr><td>第二行</td><td>第二行</td></tr><tr><td>第二行</td><td>第二行</td></tr></table></body></html>

阅读全文

0 0