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 规定应该从父元素继承轮廓宽度的设置。
相关文章
|
12月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
123 0
|
前端开发
CSS中给表格的第一列及最后一列设置不同的样式
CSS中给表格的第一列及最后一列设置不同的样式
120 0
|
Web App开发 前端开发 算法
css表格和表单
css表格和表单
|
10月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
389 0
|
6月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
185 12
|
9月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
11月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
11月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
98 1
|
11月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
136 1