CSS(表格_轮廓)

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54814015

css表格

属性 描述
border-collapse 是否把表格边框合并为单一边框 separate/collapse
border-spacing 设置分隔单元格边框的距离 num
caption-side 表格标题的位置 Top/bottom
empty-cells 设置是否显示表格中的空单元格 hide/show
table-layout 设置显示单元、行和列的算法

table-layout:
automatic: 列宽度由单元格内容设定。默认
fixed: 列宽由表格宽度和列宽度设定。
inherit: 规定应该从父元素继承 table-layout 属性的值。

一个简单的表格
表格

<html>
    <head>
        <style type="text/css">
            table{
                border-collapse:collapse;
                border:solid 1px ;
                width:50%;
            }
            table th{
                background-color:skyblue;
                color:white;
            }
            table th,td{
                text-align:center;
                border:solid 1px red ;
            }
            tr.em{
                background-color:rgb(255,0,0);
            }
        </style>
    </head>
    <body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr class="em">
            <td>张三</td>
            <td></td>
            <td>20</td>
        </tr>
        <tr>
            <td>张三</td>
            <td></td>
            <td>20</td>
        </tr>
        <tr class="em">
            <td>张三</td>
            <td></td>
            <td>20</td>
        </tr>
        <tr>
            <td>张三</td>
            <td></td>
            <td>20</td>
        </tr>

    </table>

    </body>
</html>

outline 轮廓

outline-color 规定边框的颜色。

outline-style 规定边框的样式。

可能用到的样式

描述
none 定义无轮廓。默认
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

outline-width 规定边框的宽度。

可能用到的值

thin 规定细轮廓。
medium 规定中等的轮廓.默认
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
inherit 规定应该从父元素继承轮廓宽度的设置。
相关文章
|
3月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
28 0
|
5月前
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
|
6月前
|
前端开发
|
7月前
|
Web App开发 前端开发 算法
css表格和表单
css表格和表单
|
1月前
|
前端开发
编程笔记 html5&css&js 016 HTML表格
编程笔记 html5&css&js 016 HTML表格
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
24 0
|
3月前
|
移动开发 前端开发 小程序
CSS 如何完美地去除表格的 “双线”
CSS 如何完美地去除表格的 “双线”
|
4月前
|
JavaScript 前端开发
【jQuery学习】—jQuery操作CSS和表格
【jQuery学习】—jQuery操作CSS和表格
|
10月前
|
前端开发
HTML|利用CSS美化一个html表格
HTML|利用CSS美化一个html表格
290 0
|
6月前
|
容器
css3 table表格
css3 table表格
26 0