用CSS设置表格样式--2019年9月6日

使用CSS制作一张带有四个圆角的表格；

预习响应式布局原理；

预习媒体查询、flex等移动端布局知识；

补齐作业。

实例运行效果：

实例--CSS代码：
                        caption {
                            font-size: 1.3em;
                            font-weight: bold;
                            margin-bottom: 10px;
                        }                  
                        table {
                            border: 1px solid #111;
                            border-collapse: separate;
                            margin: 20px auto;
                            width: 800px;
                            text-align: center;
                            box-shadow: 2px 2px 2px #888;
                            position: relative;
                            border-spacing: 0;
                            border-radius: 10px;
                        }                       
                        table::before {
                            content: '';
                            width: 798px;
                            height: 299px;
                            position: absolute;
                            left: 0;
                            top: 40px;
                            background-image: url(school2.jpg);
                            opacity: 0.3;
                            background-size: 798px 299px;
                        }                        
                        th,
                        td {
                            border: 1px solid #111;
                            padding: 10px;
                        }                        
                        th {
                            background-color: lightseagreen;
                            font-size: 1.1em;
                        }                        
                        tbody tr~tr:nth-child(even) {
                            background-color: #eee;
                        }                        
                        tbody tr:first-of-type>td:first-of-type {
                            background-color: lightyellow;
                        }                        
                        tbody tr:nth-of-type(4)>td:first-of-type {
                            background-color: linen;
                        }                       
                        tfoot {
                            background-color: #555;
                            color: whitesmoke;
                        }                        
                        th:last-of-type {
                            border-top-right-radius: 10px;
                        }                        
                        th:first-of-type {
                            border-top-left-radius: 10px;
                        }                        
                        tfoot tr>td:first-of-type {
                            border-bottom-left-radius: 10px;
                        }                        
                        tfoot tr>td:last-of-type {
                            border-bottom-right-radius: 10px;
                        }
运行实例 »
点击 "运行实例" 按钮查看在线实例

作业总结：

1、掌握了通过CSS来设置表格样式；

2、常规的表格设置内容有：表格标题、表格的线条、大小、边距、文本对齐方式、单元格背景颜色等；

3、练习了CSS组合选择器；

4、为图片添加背景图时用到::before伪元素和background-image属性，为使图片完全覆盖内容区，使用了background-size: 798px 299px;个人感觉比使用background-size: cover;的适应性要高一些；

5、设置圆角表格时：

• 设置border-collapse: separate;如果设置为collapse则实现不了；

• 设置table的border-spacing: 0; border-radius: 10px;

• 单独设置左上、右上、左下、右下四个单元格的圆角属性。

不知道是否还有别的更好的设置方法？