CSS 学习记录8

zhaoshengmeyan

于 2024-06-21 15:15:04 发布

阅读量509

点赞数 13

文章标签： css 学习前端

本文链接：https://blog.csdn.net/zhaoshengmeyan/article/details/139847768

版权

表格属性

边框相关属性

边框相关属性其他元素也可以使用

边框宽度

属性名：border-width

边框颜色

属性名：border-color

边框线条

属性名：border-style

属性值：

none 默认值
solid 实线
dashed 虚线
dotted 点线
double 双实线

注：以上三个属性需要同时写！

复合属性

属性名：border

    <style>
        table{
            border-width: 10px;
            border-color: aqua;
            border-style: solid;
        }
    </style>

注：只给<table>加属性，只有外边框

    <style>
        table{
            border-width: 10px;
            border-color: aqua;
            border-style: solid;
        }
        td,th{
            border: 2px blue solid;
        }
    </style>

表格独有属性

均是<tsble>的属性

设置列宽

属性名：table-layout

属性值：

auto:按长度分配（默认）
fixed:平均分配

合并单元格边框

属性名：border-collapse

属性值：

collapse 合并
separate 不合并

合并后会挤掉外边框

单元格间距

属性名：border-spacing

前提：单元格边框未合并

隐藏无内容单元格

属性名：empty-cells

属性值：

show 显示（默认）
hide 隐藏

前提：单元格边框未合并

设置标题位置

属性名：caption-side

属性值：

top ：上面（默认值）
bottom ：在表格下面

        .t2{
            border: 2px aqua solid;
            width: 500px;
            table-layout:fixed;
            border-collapse: collapse;/*合并单元格*/
            caption-side: top;/*标题在上方*/
        }

        .t3{
            border: 2px aqua solid;
            width: 500px;
            table-layout:fixed;
            border-spacing: 10px;/*单元格间距*/
            empty-cells: hide;/*隐藏没有内容的单元格*/
            caption-side: bottom;/*标题在下*/
        }